:root{
    --nero:#000; --bianco:#fff; --giallo:#ff0; --ciano:#0ff;
    --verde:#0f0; --magenta:#f0f; --rosso:#f22; --blu:#00f;
    --spento:#6f6f6f;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{margin:0;padding:0;background:#0a0a0a;color:var(--bianco);
    font-family:"Cascadia Mono","Consolas","DejaVu Sans Mono","Liberation Mono",monospace;}
  body{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:10px 6px 24px}

  #tv{position:relative;background:var(--nero);border-radius:6px;padding:10px 8px;
    width:100%;max-width:44em;line-height:1.25;
    /* 40 colonne devono stare nello schermo coi margini (28px fra pagina e
       riquadro). Un carattere monospazio e' largo circa 0.6 volte la sua
       altezza: 25 invece di 24 lascia spazio ai font un po' piu' larghi. */
    font-size:min(20px, calc((100vw - 28px) / 25));
    box-shadow:0 0 0 2px #222, 0 0 30px rgba(0,255,255,.07)}
  /* righe di scansione: appena accennate, non deve dare fastidio a leggere */
  /* Toscanini, che il seggio lo rifiuto': la sua scheda va in onda in
     bianco e nero, come un cinegiornale del 1949 */
  #tv.bn{filter:grayscale(1) contrast(1.15)}
  #tv::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;
    background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 4px)}
  pre#schermo,pre#testata{margin:0;white-space:pre;overflow-x:auto;text-shadow:0 0 6px currentColor}

  .b{color:var(--bianco)} .g{color:var(--giallo)} .c{color:var(--ciano)}
  .v{color:var(--verde)} .m{color:var(--magenta)} .r{color:var(--rosso)}
  .d{color:var(--spento);text-shadow:none}
  .inv{background:var(--ciano);color:#000;text-shadow:none}
  .invg{background:var(--giallo);color:#000;text-shadow:none}
  .invr{background:var(--rosso);color:#000;text-shadow:none}
  a.n{color:inherit;text-decoration:none;cursor:pointer}
  #testata a.n{text-decoration:none}
  a.n:hover,a.n:focus{background:var(--giallo);color:#000;text-shadow:none;outline:none}
  /* le voci di menu vanno sottolineate: senza il passaggio del mouse, sul
     telefono niente diceva che fossero da toccare */
  a.n[data-p]{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}

  #extra{width:100%;margin:10px 0 6px;display:flex;gap:14px;align-items:flex-start;
    font-family:inherit}
  #extra:empty{display:none}
  #extra img{width:130px;border:2px solid var(--ciano);filter:grayscale(1) contrast(1.35) brightness(.95);
    image-rendering:pixelated}
  #extra .via{font-size:13px;line-height:1.5}
  #extra a{color:var(--ciano)}

  #comandi{max-width:44em;width:100%;margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
  #comandi input{background:#111;border:1px solid #333;color:var(--bianco);padding:7px 9px;
    font:inherit;font-size:15px;border-radius:3px}
  #pag{width:6.5em} #cerca{flex:1;min-width:9em}
  #comandi button{background:#111;border:1px solid var(--ciano);color:var(--ciano);
    font:inherit;font-size:14px;font-weight:700;padding:7px 14px;border-radius:3px;cursor:pointer}
  #comandi button:hover{background:var(--ciano);color:#000}
  .fast{display:flex;gap:0;width:100%;max-width:44em;margin-top:8px}
  .fast button{flex:1;border:0;padding:8px 4px;font:inherit;font-size:13px;font-weight:700;
    color:#000;cursor:pointer;letter-spacing:.03em}
  .fast .f1{background:var(--rosso)} .fast .f2{background:var(--verde)}
  .fast .f3{background:var(--giallo)} .fast .f4{background:var(--ciano)}
  .fast button:hover{filter:brightness(1.25)}
  #sub{max-width:44em;width:100%;margin-top:8px;display:flex;gap:8px;align-items:center;font-size:14px;color:var(--spento)}
  #sub button{background:#111;border:1px solid #333;color:var(--ciano);font:inherit;font-size:14px;
    padding:5px 12px;border-radius:3px;cursor:pointer}
  #sub button:disabled{opacity:.3;cursor:default}
  footer{max-width:44em;width:100%;margin-top:18px;font-size:12px;color:var(--spento);line-height:1.6}
  footer a{color:var(--spento)}
  #colofone a{color:var(--ciano);text-decoration:none;border-bottom:1px dotted var(--spento);cursor:pointer}
  #colofone a:hover{border-bottom-color:var(--ciano)}
  #altro-sito{display:block;margin-top:.6em}
  #altro-sito a{color:var(--ciano);text-decoration:none;border-bottom:1px dotted var(--spento)}
  #altro-sito a:hover{border-bottom-color:var(--ciano)}
  /* visibile solo a chi legge con un lettore di schermo e ai motori: il
     titolo vero della pagina, che graficamente e' gia' nella testata */
  .solo-lettori{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  footer .presentazione{margin:0 0 .5em}