:root { color-scheme: light dark; }
html, body { margin: 0; height: 100%; background: #fff; overflow: hidden; }
/* Pagina e layer fissi stanno in un solo contesto di sovrapposizione, il
   #stage: #scroller e #fixed non ne creano uno loro (sono absolute, senza
   z-index), cosi' lo z-index (l'ordine di A) di ogni layer vale fra tutti.
   Con i due position: fixed i layer fissi stavano sempre sopra a quelli della
   pagina: quando un sito apre un box (cookie, login) e blocca lo scroll
   rendendo fissa la pagina sotto, la pagina copriva il box. */
#stage { position: fixed; inset: 0; }
#scroller {
  position: absolute; inset: 0;
  /* anche in orizzontale: pagine con una larghezza minima (Wikipedia desktop
     su un telefono) altrimenti restavano tagliate a destra */
  overflow: auto;
  /* larghezza utile costante: la scala non cambia quando compare la barra */
  scrollbar-gutter: stable;
  /* niente -webkit-overflow-scrolling: touch: dagli iOS 13 lo scroll e' gia'
     accelerato, e sui vecchi creava un contesto di sovrapposizione (vedi #stage) */
  overscroll-behavior: contain;
}
/* Niente rimbalzo (rubber-band) su nessuno scroller sul telefono: iOS lo fa
   anche su uno scroller che scorre, quando lo si trascina oltre i bordi, e
   scopriva il bianco dietro la pagina in tutte le direzioni (es. il feed di
   Instagram, che e' uno scroller interno). Il passaggio dello scroll alla
   pagina non dipende dal chaining ma dai pointer-events (uno scroller che non
   scorre e' pointer-events:none, vedi upsertScroller), quindi togliere il
   rimbalzo non lo intacca. Solo su touch (pointer: coarse): sul desktop la
   rotella continua a scorrere la pagina sotto come prima. */
@media (pointer: coarse) {
  #scroller, .scroller { overscroll-behavior: none; }
}
/* Il contenuto e' grande quanto quello di A (vedi upsertScroller) e taglia
   cio' che ne esce: un layer che sporge (per esempio con il clip "infinito"
   di Chromium, [0, -8388608, w, 16777215], delle intestazioni) allungava lo
   scroll di B, e sul telefono si scorreva nel bianco oltre la fine della
   pagina. "clip" e non solo "hidden": non diventa un contenitore scorrevole
   (hidden resta come ripiego per i browser vecchi). Nessuno dei due crea un
   contesto di sovrapposizione, quindi l'ordine fra layer (#stage) non cambia. */
#content { position: relative; width: 100%; pointer-events: none; overflow: hidden; overflow: clip; }
#content canvas.tile {
  position: absolute; left: 0; display: block;
  /* ogni tessera e' un layer del compositor nativo: lo scroll non passa da JS */
  will-change: transform; pointer-events: none; user-select: none;
}
/* compositor (index.html) */
#fixed { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Gli scroller interni passano lo scorrimento alla pagina quando non possono
   piu' (o non possono affatto) scorrere in quella direzione, come in A. Con
   "contain" un box alto che scorreva di 3 px in orizzontale bloccava lo
   scroll verticale della pagina sul telefono. */
.scroller {
  position: absolute; overflow: auto;
  transform-origin: 0 0; pointer-events: auto;
}
.scroller > .content { position: relative; pointer-events: none; overflow: hidden; overflow: clip; }
.clip { position: absolute; pointer-events: none; }
.layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }
/* Iframe di un altro processo (vedi ctxFor): dentro il suo layer "surface",
   in px di A. Come #stage: pagina e layer fissi dell'iframe si alternano. */
.frame, .frame-root, .frame-fixed { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none; }
.frame-content { position: relative; pointer-events: none; }
.layer > canvas.tile { position: absolute; display: block; pointer-events: none; user-select: none; }
#raster { position: fixed; left: -99999px; top: 0; }
/* In attesa che A raggiunga le dimensioni di questo schermo (vedi expectSize). */
.resizing #scroller, .resizing #fixed { visibility: hidden; }
/* Campo invisibile per la tastiera del telefono. Font a 16px: iOS non fa
   zoom quando lo mette a fuoco; in alto: il telefono non scorre la pagina
   per mostrarlo sopra la tastiera. */
#ime {
  position: fixed; left: 0; top: 0; width: 1px; height: 1px;
  padding: 0; border: 0; font-size: 16px; opacity: 0; resize: none;
  pointer-events: none; caret-color: transparent; color: transparent;
  background: transparent;
}
/* Pulsante "Incolla" nel punto della pressione prolungata (B non ha il menu nativo). */
#paste.bd-ui {
  position: fixed; z-index: 999997;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff;
  background: rgba(18, 18, 22, .9); border: 0; border-radius: 9px; padding: 8px 13px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35); pointer-events: auto; cursor: pointer;
}
#paste[hidden] { display: none; }
/* Caricamento: un anello che gira al centro, finche' la pagina non e' disegnata. */
#loader {
  position: fixed; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; border: 3px solid rgba(0, 0, 0, .1); border-top-color: rgba(0, 0, 0, .55);
  animation: bd-spin .8s linear infinite; pointer-events: none; z-index: 999998;
  transition: opacity .2s;
}
.ready:not(.resizing) #loader { opacity: 0; animation-play-state: paused; visibility: hidden;
  transition: opacity .2s, visibility 0s .2s; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #loader { animation-duration: 2.4s; } }
.watch #loader { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 2px; }
/* Anteprima del pannello (?watch): la pagina segue A, senza barre ne' gesti. */
.watch #scroller { overflow: hidden; scrollbar-gutter: auto; }
/* Barra della pagina di sviluppo captures.html (B non ha barre). */
#hud {
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: center;
  font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace;
  background: rgba(18, 18, 22, .88); color: #fff;
  padding: 6px 10px; border-radius: 10px; max-width: calc(100% - 24px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35); backdrop-filter: blur(10px);
  z-index: 999999;
}
#stats { opacity: 0.8; white-space: nowrap; }