@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/font/inter.min.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/font/jetbrains-mono.min.woff2) format('woff2')}

/* ============================================================
   BASE — i nomi delle cose.
   Un file solo, primo su ogni pagina. Nessun altro foglio
   dichiara colori, misure o curve: qui si cambia una volta e
   cambia ovunque.

   NESSUN COLORE E' CAMBIATO rispetto a prima: sono gli stessi
   valori, con un nome al posto del numero.
   ============================================================ */

:root{

  /* ---------- superfici ----------
     Quattro livelli invece di due improvvisati: fondo, la lastra
     appoggiata, quella sollevata, quella in primo piano. */
  --fondo:#08080A;
  --sup-1:#0E0E12;
  --sup-2:#111114;
  --sup-3:#17171B;

  /* La luce della stanza: erano due esadecimali scritti a mano
     dentro il gradiente del fondo. Sono decisioni, non numeri. */
  --luce-alta:#1A1426;
  --luce-bassa:#071A19;

  /* ---------- testo ---------- */
  --testo:#F4F4F2;
  --testo-soft:#96969D;
  --testo-tenue:#61616B;

  /* ---------- linee ----------
     La seconda era scritta a mano in ogni hover. */
  --linea:#232329;
  --linea-viva:#33333C;

  /* ---------- accenti, con gli stati ----------
     Turchese = interazione. Viola = struttura. Non invertirli. */
  --teal:#0AD6B6;
  --teal-su:#3FE3C6;          /* hover: sale di luce */
  --teal-giu:#08B89C;         /* premuto: rientra */
  --teal-spento:rgba(10,214,182,.38);

  --violet:#6B16CF;
  --violet-su:#9B5CF0;
  --violet-giu:#5A11B0;
  --violet-spento:rgba(107,22,207,.38);

  /* compatibilita' con i nomi vecchi, finche' i fogli non sono
     tutti migrati: stesso valore, nessun cambiamento a video */
  --violet-lo:var(--violet-su);
  --ink:var(--fondo);
  --sur:var(--sup-2);
  --sur2:var(--sup-3);
  --txt:var(--testo);
  --soft:var(--testo-soft);
  --rule:var(--linea);

  /* ---------- aloni ----------
     I bagliori al neon erano ventisette rgba() scritti a mano. */
  --alone-teal:rgba(10,214,182,.55);
  --alone-teal-largo:rgba(10,214,182,.22);
  --alone-violet:rgba(155,92,240,.55);
  --alone-violet-largo:rgba(155,92,240,.22);
  --velo-chiaro:rgba(255,255,255,.06);
  --velo-vetro:rgba(255,255,255,.08);

  /* ---------- avvisi ----------
     Vive solo nella pagina di prova, ma un colore senza nome
     e' un colore che nessuno sa dove trovare. */
  --avviso:#E5A03C;

  /* ---------- caratteri ---------- */
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* ---------- scala tipografica ----------
     Sei gradini. Prima erano almeno undici misure decise a occhio. */
  --t-mini:10.5px;                       /* etichette minuscole */
  --t-xs:clamp(11.5px,1.1vw,12.5px);     /* dati, tag */
  --t-s:clamp(13.5px,1.2vw,15px);        /* testo secondario */
  --t-m:clamp(16.5px,1.15vw,20px);       /* corpo */
  --t-l:clamp(19px,2.4vw,32px);          /* titoli di blocco */
  --t-xl:clamp(23px,5.4vw,68px);         /* apertura */

  /* ---------- spaziatura ----------
     Base quattro. Prima: 9, 11, 12, 14, 16 scelti a occhio. */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:72px;  --s9:112px;

  /* ---------- raggi ---------- */
  --r1:8px; --r2:11px; --r3:14px; --r4:16px; --r-tondo:999px;

  /* ---------- ombre ----------
     Tre livelli invece della stessa tripletta ricopiata ovunque. */
  --om-1:0 1px 0 var(--velo-chiaro) inset,
         0 12px 24px -18px rgba(0,0,0,.85);
  --om-2:0 1px 0 var(--velo-chiaro) inset,
         0 20px 40px -24px rgba(0,0,0,.92),
         0 3px 8px rgba(0,0,0,.4);
  --om-3:0 1px 0 var(--velo-vetro) inset,
         0 34px 64px -34px rgba(0,0,0,.95),
         0 6px 16px rgba(0,0,0,.5);

  /* ---------- larghezze ---------- */
  --max:1100px; --pad:24px;

  /* ============================================================
     MOVIMENTO
     Prima c'era UNA curva sola per cinquanta transizioni su
     cinquantadue, e diciannove durate scelte a caso. Un bottone
     premuto e una carta che arriva decelaravano identici: il
     cervello lo legge come una cosa sola che si ripete.
     ============================================================ */

  /* Gli arrivi: lenti, che si posano. */
  --curva-entra:cubic-bezier(.16,1,.3,1);

  /* Le reazioni al tocco: partono subito, si fermano nette. */
  --curva-secca:cubic-bezier(.3,0,.2,1);

  /* La molla. RICADUTA per chi non conosce linear(): un rimbalzo
     solo, ottenuto con una bezier che supera l'uno. */
  --curva-molla:cubic-bezier(.34,1.46,.64,1);

  /* Quattro durate, non diciannove. */
  --d1:.16s;   /* reazione: premuto, acceso */
  --d2:.3s;    /* hover, cambio di stato */
  --d3:.55s;   /* comparsa di un elemento */
  --d4:.9s;    /* scena: qualcosa che entra in campo */

  /* nome vecchio, stesso valore */
  --curva:var(--curva-entra);
}

/* La molla vera, dove il browser sa leggerla: una curva campionata
   da un sistema massa-molla, con il rimbalzo che si smorza. Gira
   sul compositore, quindi e' piu' fluida di qualsiasi molla
   calcolata in JavaScript. */
@supports (transition-timing-function:linear(0,1)){
  :root{
    --curva-molla:linear(
      0, .0088, .0344 2.3%, .1405 5.1%, .3183 8.5%, .5405 12.4%,
      .7719 16.5%, .9769 20.6%, 1.0526, 1.1043, 1.1316 25.3%,
      1.1313, 1.1119 29.1%, 1.0728 32.3%, 1.0114 36.4%,
      .9924 38.4%, .9836 40.6%, .9846 43.3%, .9964 47.7%,
      1.0035 51.9%, 1.0055 56.7%, .9991 68.2%, 1
    );
  }
}

@media(min-width:1500px){:root{--max:1320px; --pad:40px}}
@media(min-width:1900px){:root{--max:1520px}}