/* Versione mobile (html.mob): una colonna, testo a misura di telefono, scene animate scorribili di lato. */
.rothint{display:none}
.mobask{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,var(--page) 70%,transparent);padding:16px}
.mobask .mcard{width:100%;max-width:440px;background:var(--page);border:1px solid var(--strong);padding:22px 20px 18px;display:flex;flex-direction:column;gap:12px}
.mobask .wm{font:600 20px/1 var(--sans);letter-spacing:-.03em}
.mobask h2{margin:0;font:600 24px/1.15 var(--sans);letter-spacing:-.03em}
.mobask p{margin:0;font:400 15px/1.5 var(--sans);color:var(--ink2)}
.mobask .fine{font:400 12px/1.4 var(--mono);color:var(--mute)}
.mobask .mbtns{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mobask button{appearance:none;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:1.1em 1em;border:1px solid var(--border);background:var(--page);color:var(--ink);cursor:pointer}
.mobask button.yes{background:var(--inv);color:var(--oninv);border-color:var(--inv)}
a.tbtn{text-decoration:none;display:inline-flex;align-items:center}

html.mob,html.mob body{height:100%}
html.mob #app{height:100dvh;padding-inline:14px}
/* testata */
html.mob .top{gap:8px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
html.mob .chap,html.mob .prog,html.mob .legend,html.mob #spk{display:none!important}
html.mob .top .wm{margin-right:auto;font-size:19px}
html.mob .tbtn{padding:.75em .7em;font-size:10.5px}
/* scena: scorre in verticale */
html.mob .scene{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:16px;margin-top:8px}
html.mob .scene.in>*{animation:none!important}
html.mob .eyebrow{font-size:10px;line-height:1.6;padding-top:12px}
html.mob .eyebrow .chips{display:inline-flex;margin-left:6px}
html.mob h1,html.mob .intro h1{font-size:clamp(24px,7.4vw,34px);line-height:1.08;max-width:none}
html.mob .sub{font-size:15px}
html.mob .keys{gap:6px}
html.mob .keys li{font-size:10px;padding:.6em .7em;letter-spacing:.08em}
html.mob .cap{flex-direction:column;gap:4px;min-height:0}
html.mob .cap .tx{font-size:15px}
html.mob .pin{display:none}
/* copertina e chiusura */
html.mob .cover{justify-content:flex-start;gap:16px;padding-top:12px}
html.mob .hero{font-size:clamp(38px,12vw,60px);line-height:.95;max-width:none}
html.mob .lead{font-size:15px}
html.mob .index{grid-template-columns:1fr;flex:0 0 auto}
html.mob .index li{padding:9px 0}
html.mob .cover-bg{opacity:.35}
html.mob .slab{grid-template-columns:1fr;padding:20px}
html.mob .closing-note{font-size:11.5px}
/* racconto: tutto su una colonna */
html.mob .stats,html.mob .stats.two-q,html.mob .cards3,html.mob .cards3.two,html.mob .cards4,html.mob .q4,html.mob .agents,
html.mob .s00 .two,html.mob .kgrid,html.mob .cgrid{grid-template-columns:1fr!important;flex:0 0 auto;align-content:start;gap:18px;margin-top:16px}
html.mob .stat .num{font-size:clamp(46px,15vw,76px)}
html.mob .stat .num.sm,html.mob .stat .pair .num,html.mob .stat .num.txt{font-size:clamp(38px,11vw,60px)}
html.mob .stat p,html.mob .card p{font-size:15px;max-width:none}
html.mob .card h2{font-size:clamp(24px,7vw,34px)}
html.mob .cards4 .card h2,html.mob .cards3.rule .card h2{font-size:22px}
html.mob .quote{font-size:15px;align-self:auto}
html.mob .thesis{flex:0 0 auto;padding-top:24px}
html.mob .thesis h1.big{font-size:clamp(34px,10vw,52px)}
html.mob .wmbig{font-size:clamp(64px,20vw,110px)}
html.mob .q4 li{font-size:20px}
html.mob .bar1{grid-template-columns:80px minmax(0,1fr) 46px;gap:8px}
html.mob .bar1 b{font-size:24px}
html.mob .layers{flex:0 0 auto;margin-top:16px}
html.mob .ly{grid-template-columns:1fr;gap:6px;padding:14px}
html.mob .ly .wm2{font-size:30px}
html.mob .src,html.mob .punch,html.mob .forwho,html.mob .foot-line{font-size:12.5px;margin-top:14px}
html.mob .punch{font-size:15px}
/* scene animate: si scorrono di lato, ruotando il telefono si vedono intere */
html.mob .stage{flex:0 0 auto;justify-content:flex-start;align-items:stretch;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:8px 0;margin-inline:-14px;padding-inline:14px}
html.mob .stage svg.sc,html.mob .stage svg.mesh{width:900px;min-width:900px;height:auto;max-height:none;flex:0 0 auto}
html.mob .rothint{display:block;margin:12px 0 0;font:400 11.5px/1.4 var(--mono);color:var(--mute)}
html.mob .rothint::before{content:"↻  "}
html.mob .seg{margin-top:12px}
html.mob .kside{padding-block:0}
/* tabelle */
html.mob .cmp-wrap{flex:0 0 auto;overflow-x:auto;margin-inline:-14px;padding-inline:14px}
html.mob .cmp{min-width:640px;font-size:13px}
/* console: meglio aprirla a schermo intero */
html.mob .demo-label{font-size:11px}
html.mob .cframe{min-height:62vh}
html.mob .tour ol{display:grid;grid-template-columns:1fr;gap:0}
/* barra in basso: frecce grandi, il resto essenziale */
html.mob .bar{gap:6px;padding-block:8px calc(8px + env(safe-area-inset-bottom,0px))}
html.mob .bar .hint,html.mob .bar .sig,html.mob #nbtn,html.mob #pause{display:none}
html.mob .bar button{padding:1em 1.1em;font-size:12px}
html.mob #next{flex:1 1 auto}
html.mob #prev{flex:0 0 auto}
html.mob .bar .foot{margin-left:0}
html.mob .bar .pos{display:inline!important;font-size:10.5px}
html.mob #notes{width:100%}
/* in orizzontale la scena animata entra intera */
@media (orientation:landscape){
  html.mob .stage svg.sc,html.mob .stage svg.mesh{width:100%;min-width:640px}
  html.mob .rothint{display:none}
  html.mob .kgrid{grid-template-columns:minmax(0,1fr) 240px!important}
}