/* Font in locale: stessi file variabili di Google Fonts, sottoinsieme latin. */
@font-face{font-family:'Inter';src:url(fonts/inter-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:'Mona Sans';src:url(fonts/mona-sans-latin.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:block}

/* Guscio: la slide si adatta a quello che resta sopra la barra. */
html,body{height:100%;margin:0;background:#090909;overflow:hidden;overscroll-behavior:none}
#app{position:fixed;inset:0;height:100vh;height:100dvh;display:flex;flex-direction:column}
#view{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}

#bar{position:relative;flex:none;height:60px;display:flex;align-items:center;justify-content:center;gap:14px;font-family:'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased}
#bar button{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #333;border-radius:50%;background:#1c1c1c;color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#bar button:hover:not(:disabled){background:#2a2a2a}
#bar button:focus-visible{outline:2px solid #ef4723;outline-offset:2px}
#bar button:disabled{opacity:.35;cursor:default}
#bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bar button[hidden]{display:none}
#count{min-width:76px;text-align:center;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;color:#c9c9c9;white-space:nowrap}
#fs{position:absolute;right:12px;top:8px}

/* Telefono in orizzontale: la barra va di lato, così la slide resta più grande. */
@media (orientation:landscape) and (max-height:500px){
  #app{flex-direction:row}
  #bar{width:60px;height:auto;flex-direction:column;gap:10px}
  #count{min-width:0;font-size:13px}
  #fs{position:absolute;right:8px;top:8px}
}

/* Slide: stesse regole di base del tipo Slides. */
.slide{position:absolute;left:0;top:0;width:1920px;height:1080px;box-sizing:border-box;overflow:hidden;background:#090909;color:#FAF9F5;font-family:'Inter',Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
.slide:not([style*="display:"]),.slide div:not([style*="display:"]){display:flex;flex-direction:column}
.slide[hidden]{display:none!important}
.slide>*{z-index:0}
.slide *{box-sizing:border-box}
.slide div{min-width:0;min-height:0}
.slide p,.slide h1,.slide h2,.slide h3{margin:0;min-width:0;min-height:0;white-space:normal;overflow-wrap:break-word;text-wrap:pretty}
.slide p{font-size:32px;font-weight:400;line-height:1.4}
.slide h1{font-size:96px;font-weight:600;line-height:1.1}
.slide h2{font-size:64px;font-weight:600;line-height:1.15}
.slide h3{font-size:44px;font-weight:600;line-height:1.2}
.slide b{font-weight:700}
.slide a{color:inherit;text-decoration:underline}
.slide img,.slide video{display:block;object-fit:cover;min-width:0;min-height:0}
.slide video{background:#141414}
.slide .ic{display:block;min-width:0;min-height:0}

/* Slide 11: le coppie di pagine che si girano. */
.slide [data-build-out].out{opacity:0}
.slide.anim [data-build-out]{transition:opacity .24s ease-out}