:root{
  /* ParliAmo — palette tramonto. Arancio protagonista, azzurro accento. */
  --ocean:#2e9dd8;--ocean-mid:#4fb3e4;--ocean-light:#8fd3f0;--ocean-pale:#dcf1fb;
  --sun:#f0a03a;--sun-pale:#fdeecb;
  --grass:#d98a1f;--grass-light:#e8c86a;--grass-pale:#fbeecb;
  --rose:#b23a26;--rose-pale:#f7e0da;
  --violet:#e8731f;--violet-pale:#fde8d5;
  --coral:#d8542a;--coral-pale:#fbe3d8;
  --teal:#2e9dd8;--teal-pale:#dcf1fb;
  --border:#ece4dd;--bg:#fdf9f5;--white:#fff;
  --text:#2e2340;--text-soft:#8a7f74;
  --shadow-sm:0 1px 6px rgba(0,0,0,.07);
  --shadow:0 4px 18px rgba(0,0,0,.09);
  --shadow-lg:0 10px 42px rgba(0,0,0,.13);
  --r:18px;--r-lg:26px;--r-xl:36px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
.screen{display:none;flex-direction:column;min-height:100vh;}
.screen.active{display:flex;}


/* ── Pulsante stop TTS (floating, appare durante la lettura) ── */
#tts-stop-btn {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  font: 800 13px 'Nunito', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: popIn .2s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
}
#tts-stop-btn:active { transform: translateX(-50%) scale(.96); }
@keyframes popIn {
  from { opacity:0; transform: translateX(-50%) scale(.85); }
  to   { opacity:1; transform: translateX(-50%) scale(1); }
}