/* Hello, Subject — il sito.

   La Struttura di notte. Prima le superfici erano di cemento chiaro, come le pareti che si vedono
   dentro una camera illuminata; qui non c'è nessuna camera illuminata. Tutto è quasi nero, e le
   uniche cose luminose sono quelle che fanno luce da sole: la telecinesi, il campo di dissoluzione,
   la soluzione corrosiva, un segnale di pericolo, l'occhio di una sentinella. Nessun colore decora
   niente: ognuno vuol dire nel sito quello che vuol dire nel gioco.

   L'altra scelta è la gerarchia al contrario. Il marchio resta pesante, perché è un marchio; tutto
   il resto smette di gridare. I titoli sono incisi, non stampati — peso medio, larghi, spaziati, di
   un osso spento che sembra illuminato invece che dipinto. Le frasi lunghe sono la cosa più grande
   della pagina, come un documento letto con la torcia. */

:root{
  /* le superfici: distanze piccolissime dal nero, ma ci sono */
  --void:#08090b;
  --void-2:#0b0c0f;
  --panel:#14161a;
  --panel-2:#191c21;
  --edge:rgba(226,232,238,.055);      /* il filo di luce sul bordo di una lastra di metallo */
  --line:rgba(226,232,238,.085);

  /* la luce riflessa, in tre gradi */
  --bone:#d7d4cc;
  --bone-2:#a9adb2;
  --bone-3:#949aa1;                  /* tenuto alto di proposito: la vignettatura fissa toglie
                                         contrasto, e questo grigio deve restare leggibile anche
                                         sotto di essa */

  --lamp:255,238,205;                 /* la lampada calda, la stessa del gioco */

  --cy:#5fd3e8;                       /* telecinesi */
  --am:#c79a24;                       /* pericolo segnalato */
  --vi:#a78bfa;                       /* campo di dissoluzione */
  --ac:#b9e04c;                       /* soluzione corrosiva */
  --rd:#ff5a3c;                       /* fascio */

  /* Tre facce, tre mestieri, e nessuno dei tre è un ripiego.
     La segnaletica: Big Shoulders Display, disegnata per i cartelli di Chicago — strettissima,
     alta, industriale. È la voce con cui la Struttura scrive sui muri.
     Il racconto: Newsreader, un graziato con l'asse ottico. Le frasi lunghe sono la cosa più
     grande della pagina e devono leggersi come un documento, non come un'interfaccia.
     La macchina: IBM Plex Mono. Passo fisso perché i valori cambiano parola senza spostare niente,
     ed è lo stesso registro del mono che il gioco usa nei suoi menu. */
  --display:'Big Shoulders Display','Arial Narrow','Helvetica Neue',Helvetica,sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --w:1120px;
  --gap:clamp(76px,9.5vw,148px);

  --hazard:repeating-linear-gradient(45deg,var(--am) 0 9px,#15130c 9px 18px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
/* I rimandi dell'indice ci arrivano scorrendo, non saltando. Con «riduci le animazioni» il blocco
   in fondo al file rimette il salto secco. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* La barra in alto coprirebbe il titolo della sezione appena raggiunta: si ferma prima. La stanza
   è in cima alla pagina e non ne ha bisogno. */
main>section{scroll-margin-top:92px}
#camera{scroll-margin-top:0}
body{
  margin:0;
  background:var(--void);
  color:var(--bone-2);
  /* Un graziato chiede più interlinea di un bastone: 1,8 invece di 1,7. */
  font:400 18px/1.8 var(--body);
  font-optical-sizing:auto;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
/* Il pulviscolo sta sotto a tutto: il fondo di `body` si propaga alla radice e viene dipinto prima
   di ogni cosa, quindi uno `z-index:-1` ci finisce sopra e sotto al contenuto. Le sezioni che hanno
   un fondo loro — l'inventario, il banco — lo coprono, ed è giusto: l'aria si vede al buio. */
#pulviscolo{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Il bordo dello schermo si chiude nel nero: si sta dentro qualcosa, non davanti a una pagina. */
body::after{
  content:'';position:fixed;inset:0;z-index:4;pointer-events:none;
  /* Centrata poco sotto la metà e larga: così il buio si chiude sui lati e sugli angoli, dove non
     c'è testo, e la fascia bassa — dove il piede della pagina finisce per stare — ne prende poco.
     Verificato: nessun testo scende sotto il 4,5:1 con la vignettatura addosso. */
  background:radial-gradient(152% 132% at 50% 52%,transparent 52%,rgba(0,0,0,.4) 100%);
}
img,canvas{display:block;max-width:100%}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

a{color:var(--cy);text-underline-offset:.22em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,canvas:focus-visible{
  outline:2px solid var(--cy);outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--cy);color:#08090b;padding:12px 18px;font:600 13px var(--mono);
}
.skip:focus{left:8px;top:8px}

/* ---------- il marchio resta pesante, i titoli si fanno incidere ---------- */
.prose h2,.manifest__head h2,.voice h2,.exit h2{
  font-family:var(--display);
  font-weight:500;
  text-transform:uppercase;
  line-height:1.06;      /* la faccia è stretta e alta: le righe possono stare più vicine */
  letter-spacing:.06em;
  color:var(--bone);
  text-wrap:balance;
}

/* ---------- la barra che si accende dopo la stanza ---------- */
.rail{
  position:fixed;inset:0 0 auto 0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px clamp(16px,4vw,32px);
  background:rgba(8,9,11,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-100%);
  transition:opacity .22s ease,transform .22s ease;
}
.rail.is-up{opacity:1;transform:none}
/* La barra sta in alto, dove la vignettatura è già forte: il marchio ci va col grigio più chiaro. */
.rail__mark{font:500 13px var(--mono);letter-spacing:.1em;color:var(--bone)}
.rail__cta{
  font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--cy);padding:8px 15px;border-radius:2px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(95,211,232,.4);
}
.rail__cta:hover{background:rgba(95,211,232,.1)}

/* L'indice. La voce della sezione in cui si sta porta la tacca ciano — la stessa che nel gioco
   segnala un comando attivo — e non è un collegamento a dove si è già. */
.indice{
  display:flex;align-items:center;gap:4px;
  margin:0 auto;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.indice::-webkit-scrollbar{display:none}
.indice a{
  position:relative;flex:0 0 auto;
  font:500 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  color:var(--bone-3);padding:9px 12px;border-radius:2px;
  transition:color .14s ease,background .14s ease;
}
.indice a:hover{color:var(--bone);background:rgba(226,232,238,.05)}
.indice a[aria-current="true"]{color:var(--bone)}
.indice a[aria-current="true"]::after{
  content:'';position:absolute;left:12px;right:12px;bottom:3px;height:1px;
  background:var(--cy);box-shadow:0 0 7px rgba(95,211,232,.7);
}

/* ============================== LA STANZA ============================== */
.hero{margin:0}
.stage{position:relative;width:100%}
/* Il vetro: è questo il riquadro a cui sono ancorati il suggerimento e il verdetto, non tutto il
   palco — a schermo stretto il titolo esce dalla stanza e si mette sopra, e non deve portarseli
   dietro. */
.stage__view{
  position:relative;
  background:var(--void);
  border-bottom:1px solid rgba(0,0,0,.9);
}
#demo-canvas{
  width:100%;
  aspect-ratio:5/2;        /* più largo della stanza: il pieno taglia soffitto e fondo vasca */
  max-height:66vh;
  touch-action:none;
  cursor:grab;
  background:var(--void);
}
#demo-canvas.is-live{cursor:crosshair}
/* Senza JavaScript la tela resta vuota e sarebbe un buco nero alto mezzo schermo: il `noscript`
   la nasconde e mette al suo posto la riga qui sotto. */
.senza-js{display:none}
#demo-canvas:focus{outline:none}
#demo-canvas:focus-visible{outline:2px solid var(--cy);outline-offset:-3px}

/* Il titolo sta dentro la stanza, dipinto sul muro di fondo: le righe in alto della mappa sono
   vuote proprio per lasciargli spazio. */
.stage__title{
  position:absolute;left:clamp(18px,5vw,72px);top:clamp(16px,4.5vw,54px);
  max-width:min(48%,640px);
  z-index:2;   /* il vetro viene dopo nel documento: senza questo lo coprirebbe */
  pointer-events:none;
  text-shadow:0 2px 34px rgba(4,5,6,.9),0 1px 3px rgba(4,5,6,.7);
}
.mark{
  font-family:var(--display);font-weight:800;
  text-transform:uppercase;line-height:.86;color:var(--bone);
  font-size:clamp(48px,8.4vw,132px);
  display:flex;flex-wrap:wrap;column-gap:.26em;align-items:baseline;
}
/* Big Shoulders non ha un asse di larghezza: il salto fra le due parole lo fanno il peso, la
   spaziatura e il colore, non la larghezza. */
.mark__a{font-weight:300;letter-spacing:.06em;color:var(--bone-3)}
.mark__b{font-weight:800;letter-spacing:.005em}
.lede{
  max-width:42ch;margin-top:1.05em;
  font-size:clamp(15px,1.55vw,19px);line-height:1.62;color:var(--bone-2);
}

.verdict{
  position:absolute;inset:0;display:grid;place-content:center;gap:20px;justify-items:center;
  background:rgba(6,7,9,.86);text-align:center;padding:20px;
}
.verdict[hidden]{display:none}
.verdict__what{
  max-width:32ch;
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;line-height:1.12;
  font-size:clamp(19px,2.7vw,30px);color:var(--bone);
}
.verdict__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---------- il banco di comando ---------- */
/* Metallo scuro, non cemento chiaro: di notte il banco è illuminato solo dalle sue spie. */
.deck{
  width:100%;
  background:linear-gradient(180deg,var(--panel-2),#0d0f12);
  border-top:1px solid rgba(199,154,36,.34);
  box-shadow:inset 0 1px 0 rgba(226,232,238,.045),inset 0 -1px 0 rgba(0,0,0,.6);
}
.deck__in{
  max-width:var(--w);margin:0 auto;
  padding:15px clamp(14px,4vw,32px);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
}
.deck__in>*{min-width:0}
.ctrls{display:flex;flex-wrap:wrap;gap:8px}

.btn{
  display:inline-flex;align-items:baseline;gap:9px;
  font:600 11px var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--bone-3);background:#0c0e11;
  border:0;border-radius:2px;padding:11px 15px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 -2px 0 rgba(0,0,0,.5);
  transition:background .12s ease,color .12s ease,box-shadow .12s ease;
}
.btn:hover{background:#13161a;color:var(--bone-2);box-shadow:inset 0 0 0 1px var(--line)}
.btn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.btn__val{font-weight:500;letter-spacing:.1em;color:var(--cy)}
/* acceso è il colore della cosa, spento è l'osso: la differenza si legge nel colore, non in un
   grigio troppo scuro per essere letto. */
.btn[aria-pressed="false"] .btn__val{color:var(--bone-3)}
/* la barriera accesa si legge nel colore del campo di dissoluzione */
#btn-barriera[aria-pressed="true"] .btn__val{color:var(--vi)}
.btn--key{
  background:transparent;color:var(--cy);padding:13px 22px;
  box-shadow:inset 0 0 0 1px rgba(95,211,232,.45);
}
.btn--key:hover{background:rgba(95,211,232,.12);color:var(--cy)}
.btn--ghost{
  background:transparent;color:var(--bone-2);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line);padding:13px 22px;
}
.btn--ghost:hover{background:rgba(226,232,238,.06);color:var(--bone)}

.pad{display:none;gap:8px}
.pad__k{
  min-width:58px;padding:14px 16px;border:0;border-radius:2px;cursor:pointer;
  background:#0c0e11;color:var(--bone-2);
  font:600 13px var(--mono);letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 -2px 0 rgba(0,0,0,.5);
  touch-action:none;
}
.pad__k.is-down{
  background:rgba(95,211,232,.16);color:var(--cy);
  box-shadow:inset 0 0 0 1px rgba(95,211,232,.45);
}

/* Su un telefono, tenere premuto un comando fa partire la selezione del testo, e sotto al dito
   compare il menu del sistema: si muove il soggetto e si finisce con mezza pagina evidenziata.
   Il banco e il vetro non sono testo da selezionare, quindi lì la selezione è spenta — e resta
   accesa su tutto il resto della pagina, dove uno la vuole per copiarsi una frase. */
.deck,.stage__view,.btn,.pad__k{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.pad__k--wide{min-width:88px;text-transform:uppercase;font-size:11px;letter-spacing:.15em}

/* la spia della sessione: accesa mentre gira, rossa quando si è interrotta */
.lamp{
  display:flex;align-items:center;gap:9px;
  font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);
}
.lamp__dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--cy);box-shadow:0 0 9px rgba(95,211,232,.85);
}
.lamp.is-off .lamp__dot{background:var(--rd);box-shadow:0 0 9px rgba(255,90,60,.85)}

.legenda{
  display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto;
  font:400 11.5px var(--mono);color:var(--bone-3);letter-spacing:.03em;
}
.legenda li{display:flex;align-items:center;gap:7px}
kbd{
  display:inline-grid;place-content:center;min-width:22px;height:22px;padding:0 6px;
  background:#0c0e11;color:var(--bone-2);border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--edge);
  font:500 11px var(--mono);
}
.kbd--wide{min-width:54px;letter-spacing:.06em}
.legenda__drag{color:var(--cy);border-bottom:1px dashed rgba(95,211,232,.4);padding-bottom:1px}

.hero__foot{max-width:var(--w);margin:clamp(26px,3.4vw,38px) auto 0;padding:0 clamp(14px,4vw,32px)}
.hero__note{max-width:62ch;font-size:15.5px;line-height:1.78;color:var(--bone-3)}

/* ============================== SEZIONI ==============================
   Sopra ogni titolo c'è una lampada, come nei corridoi: un alone caldo appena percettibile che
   tiene il testo in una pozza di luce e lascia il resto della pagina al buio. */
.prose,.voice,.exit{
  position:relative;
  max-width:var(--w);margin:0 auto;padding:var(--gap) clamp(14px,4vw,32px) 0;
}
.prose::before,.voice::before,.exit::before,.manifest__head::before{
  content:'';position:absolute;pointer-events:none;
  left:clamp(14px,4vw,32px);top:calc(var(--gap) - 215px);
  width:min(780px,92%);height:430px;
  /* `closest-side` con il centro al 30%: l'ellisse tocca esattamente i quattro lati del riquadro,
     quindi arriva a trasparente prima di essere tagliata. Con raggi arbitrari si vedrebbe il bordo
     del riquadro come una macchia rettangolare. */
  background:radial-gradient(closest-side at 30% 50%,rgba(var(--lamp),.062),transparent);
}

.prose h2{font-size:clamp(34px,4.8vw,62px);max-width:22ch}
.prose p{max-width:62ch;margin-top:1.25em;font-size:clamp(18px,1.9vw,21px);color:var(--bone-2)}
.prose p:first-of-type{margin-top:1.6em;color:var(--bone)}

/* ---------- LA VOCE ---------- */
.voice h2{font-size:clamp(28px,4vw,52px);max-width:24ch}
.voice__lede{max-width:62ch;margin-top:1.25em;color:var(--bone-3);font-size:17px}
/* La battuta: una riga sola, e la barra della telecinesi al posto delle virgolette. */
.voice__cita{
  margin-top:clamp(34px,4.4vw,54px);
  border-left:1px solid rgba(95,211,232,.55);
  padding:6px 0 6px clamp(20px,2.6vw,34px);
}
.voice__cita p{
  font-weight:400;
  font-size:clamp(22px,3vw,34px);line-height:1.45;color:var(--bone);max-width:38ch;
  text-wrap:pretty;
}

/* ============================== INVENTARIO ============================== */
/* Un magazzino al buio: le targhette sono incassate nel metallo e l'unica luce viene dalle icone,
   che sono la stessa arte del gioco e brillano da sole. */
.manifest{
  position:relative;
  margin-top:var(--gap);
  background:linear-gradient(180deg,var(--void-2),#0e1013 45%,var(--void-2));
  padding:var(--gap) clamp(14px,4vw,32px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.manifest__head{position:relative;max-width:var(--w);margin:0 auto clamp(34px,4.4vw,54px)}
.manifest__head::before{top:-215px;left:0}
.manifest__head h2{font-size:clamp(28px,4vw,52px)}
.manifest__mecc{
  max-width:60ch;margin-top:1.25em;color:var(--bone-2);
  font-size:clamp(17px,1.8vw,20px);line-height:1.72;
}
.manifest__head p{max-width:62ch;margin-top:1.05em;color:var(--bone-3);font-size:15.5px}

.manifest__list{
  max-width:var(--w);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:1px;
}
.item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(226,232,238,.035);
  border-radius:2px;
}
.item__glyph{
  width:40px;height:40px;flex:0 0 auto;
  background:#0a0b0e;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7);
}
.item__name{
  font:600 10.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--bone-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;line-height:1.4;
}
/* i pezzi che compaiono nella stanza di prova */
.item__name[data-badge]::after{
  content:attr(data-badge);
  font-size:8.5px;letter-spacing:.13em;font-weight:500;
  color:var(--cy);padding:3px 6px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(95,211,232,.35);
}

/* ============================== USCITA ============================== */
.hazard{height:6px;background:var(--hazard);border-radius:1px}
/* L'unica striscia di pericolo della pagina, e sta davanti all'uscita. */
.hazard--exit{margin-bottom:clamp(30px,3.8vw,46px);opacity:.5}
.exit h2{font-size:clamp(34px,4.8vw,62px)}

.ports{margin-top:clamp(34px,4.4vw,54px)}
.port{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:8px 32px;padding:28px 0;border-top:1px solid var(--line);
}
.port:last-child{border-bottom:1px solid var(--line)}
/* Il pulsante è il badge del negozio, non un pulsante nostro: nessuno sfondo, nessun bordo, niente
   attorno. L'unica libertà che le linee guida lasciano è l'aria intorno e la misura. */
.port__go{
  grid-column:2;grid-row:1/3;
  display:inline-flex;align-items:center;
  text-decoration:none;border-radius:8px;
  transition:opacity .14s ease,transform .14s ease;
}
.port__go:hover{opacity:.82}
.port__go:active{transform:translateY(1px)}
/* Le due pillole hanno proporzioni diverse (Apple 3:1, Google 3,4:1): alla stessa altezza stanno
   in riga come si deve, ed è quello che chiedono entrambe le linee guida. */
.port__badge{height:52px;width:auto;display:block}
.port__plain{display:none}
/* Il file del badge non c'è: al suo posto la scritta, non un'immagine rotta. */
.port__go.is-plain .port__badge{display:none}
.port__go.is-plain .port__plain{
  display:inline-flex;align-items:center;
  color:var(--cy);padding:15px 24px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(95,211,232,.45);
  font:600 12px var(--mono);letter-spacing:.15em;text-transform:uppercase;
}
/* iOS e macOS si scrivono come si scrivono: qui il maiuscolo non ci passa. */
.port__os{
  font-family:var(--display);font-weight:600;letter-spacing:.02em;
  font-size:clamp(28px,3.4vw,40px);line-height:1;grid-column:1;grid-row:1;color:var(--bone);
}
.port__spec{
  grid-column:1;grid-row:2;font-size:13.5px;line-height:1.6;color:var(--bone-3);max-width:48ch;
  font-family:var(--mono);letter-spacing:.01em;
}
.exit__note{
  margin-top:clamp(26px,3.2vw,40px);
  font:400 13px var(--mono);color:var(--bone-2);line-height:1.8;letter-spacing:.03em;
}

/* ============================== PIEDE ============================== */
.foot{
  max-width:var(--w);margin:0 auto;
  padding:var(--gap) clamp(14px,4vw,32px) 72px;
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font:400 12px var(--mono);color:var(--bone-2);letter-spacing:.04em;
}
.foot a{color:var(--bone-2)}
.foot a:hover{color:var(--cy)}

/* la scelta della lingua: tre voci, quella in uso non è un collegamento a niente */
.lingue{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.lingue__et{color:var(--bone-2);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px}
.lingue a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.lingue a:hover{border-bottom-color:var(--cy)}
.lingue a[aria-current="true"]{color:var(--bone);border-bottom-color:var(--bone-3);cursor:default}

/* ============================== ADATTAMENTI ============================== */
@media (max-width:860px){
  /* Il muro di fondo non è più abbastanza largo per reggere il titolo: esce dalla stanza e si
     mette sopra, sul buio della pagina, che è dello stesso colore. */
  .stage__title{
    position:static;max-width:none;
    padding:clamp(28px,7vw,44px) clamp(14px,4vw,32px) clamp(18px,4vw,24px);
    text-shadow:none;
  }
  #demo-canvas{aspect-ratio:3/2;max-height:46vh}
  .lamp{order:9}
  .legenda{margin-left:0;width:100%}
  .rail__mark{display:none}
  .indice{margin:0 auto 0 0}
  .indice a{padding:9px 9px;letter-spacing:.1em}
  main>section{scroll-margin-top:76px}
  /* L'alone teneva il margine sinistro della sezione e larghezza 100%: sommati, sforavano di
     quanto vale quel margine. Qui parte da zero. */
  .prose::before,.voice::before,.exit::before,.manifest__head::before{
    left:0;width:100%;height:300px;top:calc(var(--gap) - 150px);
  }
  .manifest__head::before{top:-150px}
  .port{grid-template-columns:minmax(0,1fr)}
  .port__go{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:10px}
}

/* Senza mouse i comandi di movimento devono stare sotto il pollice, e la scorciatoia da tastiera
   non serve a nessuno. */
@media (pointer:coarse){
  .pad{display:flex}
  .legenda li:nth-child(1),.legenda li:nth-child(2){display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}