/* Mobile scenes reserve separate tracks for pictures, copy and navigation.
   Percent-based overlays from the desktop theme must not escape these tracks. */
@media(max-width:900px){
 :root{--mobile-foot:max(20px,env(safe-area-inset-bottom));--mobile-gap:8px}
 /* The live reading log becomes a normal footer on mobile. It must never
    float over a diagram while the long flow sections pass behind it. */
 body{display:flex;flex-direction:column}main{order:1;flex:none;min-width:0}
 .titolo .sc-wrap,.intertitolo .sc-wrap,.spread,.colofone .griglia-fine{grid-template-columns:minmax(0,1fr)}
 .sc-stack,.griglia-fine>*{min-width:0}.titolo h1{font-size:clamp(2.2rem,10.4vw,4.2rem)}
 .registro-finale{overflow-wrap:anywhere}.approfondisci-link{overflow-wrap:anywhere}
 .registro{position:relative;order:2;inset:auto;width:auto;max-height:none;margin:0 16px 20px;padding:10px 12px;opacity:1;pointer-events:auto}
 .registro.chiuso{opacity:1;pointer-events:auto}.registro__title{font-size:9px;line-height:1.4;margin:0 0 5px}
 .registro ol{max-height:160px;overflow:auto}.registro li{min-height:18px;font-size:9px;line-height:1.4;padding:2px 0}.registro li:not(:last-child){display:flex}
 .giu{display:none}
 .ship-frame{inset:5px}
 [data-sc-stage] [data-sc-cue]{transform:none!important}
 .sc-stage{height:100svh}
 .brain-minibox .agent-brain-controls button{width:36px;height:36px}
 .brain-minibox .agent-brain-controls{bottom:30px}.brain-minibox .agent-brain-hint{bottom:74px}
 .brain-minibox .agent-brain-view{bottom:94px}

 /* Drawn machine and its descriptions remain in separate grid rows. */
 .officina{padding:20px 16px var(--mobile-foot);gap:12px;grid-template-rows:minmax(100px,1fr) auto;align-content:stretch}
 .officina .disegno{height:100%;min-height:0;max-height:none;padding:8px}
 .officina .callout{padding:12px 16px}.officina .callout .kicker{font-size:9px;line-height:1.4;margin-bottom:8px}
 .officina .callout .voce{margin:8px 0}.officina .callout .voce h3{font-size:1.15rem;line-height:1.15}
 .officina .callout .voce p{font-size:.77rem;line-height:1.3;margin:5px 0 0}

 /* Wireframe: two machines in the canvas, both labels below it. */
 .evo3d-stage [data-sc-stage]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(120px,1fr) auto auto;gap:8px;padding:20px 16px var(--mobile-foot)}
 .evo3d-kicker{position:static;grid-area:1/1/2/3;max-width:none;font-size:9px;margin:0;align-self:start}
 #evo3d-canvas{position:relative;inset:auto;grid-area:2/1/3/3;width:100%;height:100%;min-height:0;min-width:0}
 .evo3d-targa{position:static;inset:auto;display:grid;grid-template-columns:8px minmax(0,1fr);align-content:center;gap:4px;padding:8px;font-size:9px;min-width:0}
 .evo3d-targa--sx{grid-area:3/1}.evo3d-targa--dx{grid-area:3/2}.evo3d-targa .stati{grid-column:2;font-size:8px}
 .evo3d-targa .stati .off,.evo3d-targa .stati .on{white-space:normal;overflow-wrap:anywhere}
 .evo3d-chiusa{position:static;grid-area:4/1/5/3;min-height:38px}.evo3d-chiusa p{font-size:11px;line-height:1.35;padding:7px}

 /* Inference: the empty visual slot is measured by infer.js. */
 .infer-stage [data-sc-stage]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(80px,1fr) minmax(110px,25%) 22px auto;gap:6px;padding:18px 16px var(--mobile-foot)}
 .infer-kicker,.infer-titolo,.infer-cifre,.infer-chat,.infer-moe,.infer-moe-nota{position:relative;inset:auto;width:auto;max-width:none;transform:none!important;margin:0}
 .infer-kicker{grid-row:1;font-size:9px;padding:4px 6px;justify-self:start}
 .infer-titolo{grid-row:2;padding:0}.infer-titolo h3{font-size:clamp(.95rem,4.5vw,1.25rem);line-height:1.1}.infer-titolo p{display:none}
 .infer-cifre{grid-row:3;padding:4px 7px;gap:2px 12px;font-size:8px;letter-spacing:.025em;line-height:1.2}.infer-cifre li{padding:0}.infer-cifre b{font-size:12px;line-height:1.3}
 .infer-visual{grid-row:4;position:relative;min-height:0;pointer-events:none}
 .infer-chat{grid-row:5;height:auto;min-height:0;border-width:3px}.infer-bar{font-size:8px;line-height:1.3;padding:5px}.infer-log{font-size:11px;line-height:1.35;padding:8px}
 .infer-moe{grid-row:6;width:192px;height:22px;justify-self:center}
 .infer-moe-nota{grid-row:7;font-size:8px;line-height:1.35;padding:5px;white-space:normal;text-overflow:clip;overflow:visible;text-align:center}

 /* The infrastructure map has its own scrollport; the fixed footer never hides a container. */
 .live-stage [data-sc-stage]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:18px 12px var(--mobile-foot)}
 .live-hdr{position:relative;inset:auto;grid-row:1;padding:8px;min-width:0}.live-hdr .kicker{font-size:9px;line-height:1.4;margin-bottom:6px}.live-riga{gap:3px 8px;line-height:1.4}.live-riga b{font-size:16px}
 .live-riga>span{font-size:9px}.live-riga .sim{font-size:8px}
 .live-map-scroll{position:relative;grid-row:2;min-height:0;overflow:auto;border:1px solid #526c69;background:#0c2027a8;scrollbar-width:thin;touch-action:pan-y}
 .live-map{position:relative;min-height:560px;height:100%;width:100%;overflow:hidden}
 #infralive-canvas{position:absolute;inset:0;width:100%;height:100%}.live-labels{overflow:hidden}
 .live-agent{font-size:8px!important;line-height:1.15;width:58px;max-width:58px;white-space:normal;overflow-wrap:anywhere}
 .live-ct{padding:3px!important}.live-ct b,.live-ct span{font-size:8px!important;line-height:1.4}.live-ct span:last-child{font-size:7px!important}
 .live-ct span:nth-child(2){white-space:normal;overflow-wrap:anywhere}
 .live-nota{position:relative;inset:auto;grid-row:3;max-width:none;display:block;font-size:8px;line-height:1.35;padding:6px;margin:0}

 /* Agent brain: fixed copy height cannot expand into the interactive view. */
 .brain-stage [data-sc-stage]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:24px 16px minmax(120px,1fr) 16px 38px auto auto;gap:6px;padding:18px 16px var(--mobile-foot)}
 .brain-stage .brain-kicker{position:relative;inset:auto;grid-row:1;max-width:none;font-size:9px;line-height:1.3;padding:4px 6px;margin:0;justify-self:start}
 .brain-stage .agent-brain-status{position:relative;inset:auto;grid-row:2;max-width:none;font-size:8px;line-height:1.4;margin:0}
 .brain-stage .agent-brain-view{position:relative;inset:auto;grid-row:3;min-height:0;width:100%;height:100%}
 .brain-stage .agent-brain-hint{position:relative;inset:auto;grid-row:4;font-size:8px;line-height:1.4;margin:0}
 .brain-stage .agent-brain-controls{position:relative;inset:auto;grid-row:5;transform:none;justify-self:center;margin:0;gap:6px;align-items:start}
 .brain-stage .agent-brain-controls button{width:36px;height:36px}
 .brain-stage .brain-cifre{position:relative;inset:auto;grid-row:6;width:auto!important;max-width:none;padding:6px;gap:5px;font-size:8px;letter-spacing:.03em;margin:0;transform:none}
 .brain-stage .brain-cifre li{transform:none!important}.brain-stage .brain-cifre b{font-size:12px}
 .brain-stage .brain-copy{position:relative;inset:auto;grid-row:7;max-width:none;display:grid;min-height:64px}
 .brain-stage .brain-copy p{position:relative;inset:auto;grid-area:1/1;width:auto;max-width:none;font-size:11px;line-height:1.35;padding:7px;margin:0;align-self:stretch}

 /* The finale graph has its own visible area, above the sequence of copy. */
 .cervello-stage{display:grid;grid-template-rows:30px minmax(100px,1fr) auto;gap:10px;padding:20px 16px var(--mobile-foot)}
 .cervello-kicker{position:relative;inset:auto;grid-row:1;justify-self:start;align-self:start;font-size:10px;padding:5px;margin:0}
 #grafo{position:relative;inset:auto;grid-row:2;width:100%;height:100%;min-height:0}
 .cervello-copy{position:relative;inset:auto;grid-row:3;max-width:none;padding:12px}
 .cervello-copy .sc-lede{font-size:12px;line-height:1.4;margin:8px 0}

 /* Remaining pinned panels respect the same footer boundary. */
 .broker-wrap,.attori-wrap{padding:20px 16px var(--mobile-foot);height:100%;min-height:0}
 .broker-wrap{grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:12px}
 .broker-copy{padding:14px}.broker-copy h3{font-size:1.4rem}.broker-copy p.sc-body{font-size:12px;line-height:1.35}.broker-nota{font-size:10px;line-height:1.35}
 .transcript{height:100%;min-height:0;max-height:none;font-size:10px;line-height:1.35;padding:10px;overflow-y:auto}
 .attori-wrap{grid-template-rows:auto minmax(0,1fr);gap:12px;align-content:stretch}
 .attori-copy{padding:14px}.attori-copy .grande{font-size:1.8rem}.attori-copy h3{font-size:1.25rem}.attori-copy .sc-body{font-size:12px;line-height:1.35}
 .attori-muro{height:100%;min-height:0;max-height:none;overflow:auto}
 .console-stage,.giro-stage{padding-block:20px var(--mobile-foot)}
 .console-rail,.giro-rail{height:100%;max-height:100%;align-items:center}
 .console-rail>*{max-height:100%;overflow-y:auto;scrollbar-width:thin}
 .giro-testa{width:82vw}.giro-card{width:76vw;max-height:100%;overflow:auto}.giro-coda{width:78vw}
 .console-testa h3,.giro-testa h3{font-size:1.9rem}.console-testa .sc-body,.giro-testa .sc-body{font-size:14px;line-height:1.4}
 .console-coda p,.giro-coda p{font-size:15px;line-height:1.45}
 .quadro__barra{font-size:9px;gap:8px;flex-wrap:wrap}
 .colofone{padding-bottom:var(--mobile-foot)}
 .approfondisci-canvas{inset:0;width:100%;height:100%}
}
.live-map-scroll,.live-map{display:contents}
.infer-visual{display:none}
@media(max-width:900px){.live-map-scroll,.live-map,.infer-visual{display:block}}
/* Landscape phones use adjacent columns instead of flattening the animation. */
@media(min-width:600px) and (max-width:900px) and (max-height:520px){
 .officina{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center}.officina .callout{padding:10px 14px}
 .brain-stage [data-sc-stage]{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:24px 16px auto minmax(0,1fr) 16px 38px;gap:6px 12px}
 .brain-stage .brain-kicker{grid-area:1/1/2/3}.brain-stage .agent-brain-status{grid-area:2/1}.brain-stage .agent-brain-view{grid-area:3/1/7/2}
 .brain-stage .brain-cifre{grid-area:2/2/4/3}.brain-stage .brain-copy{grid-area:4/2;min-height:0}.brain-stage .agent-brain-hint{grid-area:5/2}.brain-stage .agent-brain-controls{grid-area:6/2}
 .infer-stage [data-sc-stage]{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:22px auto auto minmax(60px,1fr) 22px auto;gap:6px 12px}
 .infer-kicker{grid-area:1/1/2/3}.infer-titolo{grid-area:2/1}.infer-titolo h3{font-size:16px}
 .infer-cifre{grid-area:3/1}.infer-visual{grid-area:4/1}.infer-chat{grid-area:2/2/7/3}.infer-moe{grid-area:5/1}.infer-moe-nota{grid-area:6/1}
 .live-stage [data-sc-stage]{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);grid-template-rows:auto minmax(0,1fr)}
 .live-hdr{grid-area:1/1}.live-map-scroll{grid-area:1/2/3/3}.live-nota{grid-area:2/1;align-self:end}.live-ct b,.live-ct span{font-size:9px!important}
 .broker-wrap,.attori-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);align-items:stretch}
 .broker-copy,.attori-copy{align-self:center}.attori-muro{grid-template-columns:repeat(4,minmax(0,1fr))}
 .cervello-stage{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:30px minmax(0,1fr)}
 .cervello-kicker{grid-area:1/1/2/3}#grafo{grid-area:2/1}.cervello-copy{grid-area:2/2;align-self:center}
}