/* Isola con la palma */
:root {
  --fondo: #FFFFFF;
  --inchiostro: #1A1614;
  --tenue: #8A8178;
  --margine: clamp(18px, 3.2vw, 44px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  background: var(--fondo);
}
body {
  color: var(--inchiostro);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.palco {
  position: relative;
  height: var(--alto);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.palco__tela {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.palco__tela:active {
  cursor: grabbing;
}
/* finché il modello non è arrivato, una riga al suo posto */
.attesa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--tenue);
  font-size: 0.95rem;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.attesa.via {
  opacity: 0;
}
.nota {
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  bottom: var(--margine);
  margin: 0;
  max-width: 34rem;
  color: var(--tenue);
  font-size: 0.85rem;
  line-height: 1.45;
  pointer-events: none;
}