/* =============================================================================
   HIROSHI · style.css

   L'impaginazione segue la tavola disegnata: un foglio di 1440 per 1176, cinque
   sezioni numerate fra una testata e un piede. Le misure qui sotto sono quelle
   del disegno — 40 di margine, 1360 di luce, le colonne da 205 ai due lati dei
   quadranti da 420 — e diventano frazioni quando lo schermo è più stretto: la
   proporzione regge, i pixel no.

   LE VARIABILI SONO L'UNICA FONTE DELLA PALETTE. Anche il canvas le legge da
   qui, al caricamento, con `getComputedStyle`. Non c'è un solo colore scritto
   nel JavaScript, e la prima eccezione sarebbe la fine della regola.

   La lingua visiva è quella dei disegni tecnici: inchiostro su carta, filo
   sottile, angoli vivi, molto vuoto. Niente scatole e niente pillole — su una
   tavola fatta di cerchi il tondo dei bottoni non direbbe più niente. L'unica
   forma tonda ammessa è il punto che pulsa, che è un segno e non un comando.

   IL DISEGNO STA SOTTO, I COMANDI SOPRA. Il canvas copre tutto il foglio ed è
   `pointer-events:none`; i comandi sono elementi nativi che ci stanno sopra.
   È così che la tavola resta puro display mentre le manopole restano
   raggiungibili col dito, col tasto Tab e con un lettore di schermo: quello che
   sembra un quadrante da girare è un `input[type=range]` trasparente steso
   sopra il disegno del quadrante.
============================================================================= */

:root{
  --carta:#e7e7e4;    /* il fondo, grigio chiarissimo appena caldo */
  --inchiostro:#20211c;
  --inchiostro-2:#55564c;
  --grigio:#8f9084;   /* etichette tenui */
  --muto:#b8b7aa;     /* il grado più tenue: sigle, lingue non scelte, spento */
  --filo:#c3c2b4;     /* linee di struttura */
  --filo-2:#d8d7cc;   /* il filo più tenue */
  /* IL VETRO è il piano rialzato su cui appoggiano gli strumenti: due piani
     per classe — il cerchio con le sue manopole, l'effetto — il banco, la deriva. Non sta sulla retta fra carta e inchiostro
     ma oltre la carta, dalla parte opposta all'inchiostro: 1,08 di contrasto,
     quanto basta a staccare un piano senza disegnargli un bordo. */
  --vetro:#f0efe9;
  --spento:#d2d1c5;   /* graduazione non raggiunta */

  /* UN ACCENTO SOLO, ed è quello di Rada Deriva: tutto il resto è inchiostro
     su carta. Prima qui c'era una rampa a cinque fermate che diceva l'altezza
     — grave al blu, acuto al rosso — e cinque colori su una tavola di
     inchiostro erano cinque cose che chiedevano attenzione insieme.
     Nell'ambra si dice una cosa sola: ADESSO. */
  --ambra:#c25a2b;
  /* Le cifre sopra l'ambra: l'estremo chiaro del foglio, carta nel tema chiaro e
     inchiostro nello scuro — lo stesso #e7e7e4 da tutt'e due le parti. */
  --su-ambra:var(--carta);
  /* I PIANI PER SEZIONE. In chiaro e scuro valgono tutti vetro; in meriggio e
     crepuscolo prendono il colore della loro funzione (vedi i loro blocchi). */
  --piano-gocce:var(--vetro); --piano-tessuti:var(--vetro); --piano-effetti:var(--vetro);
  --piano-banco:var(--vetro); --piano-deriva:var(--vetro);
  /* Le influenze hanno il piano della deriva, tranne dove un tema le mette a croce. */
  --piano-influenze:var(--piano-deriva);

  --sans:"Helvetica Neue",-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* `color-scheme` non dipinge niente di quello che si vede qui — ogni comando
     è ridisegnato con le variabili — ma dice al browser di che colore fare
     quello che disegna LUI: il menù che si apre da una tendina, la barra di
     scorrimento, il rettangolo del fuoco. Senza, in tema scuro si aprirebbe un
     menù bianco in mezzo a una tavola nera. */
  color-scheme:light;
}

/* ------------------------------------------------------------ chiaro e scuro
   IL TEMA SCURO SCAMBIA I DUE ESTREMI: la carta diventa l'inchiostro e
   l'inchiostro diventa la carta, gli stessi due colori di prima. I sei toni in
   mezzo non sono scelti a occhio — stanno sulla retta fra i due nuovi estremi,
   ciascuno nel punto in cui il suo RAPPORTO DI CONTRASTO con il fondo è quello
   che aveva sulla carta chiara. Misurati: 6,01 · 1,45, gli stessi a due cifre;
   `grigio`, `muto`, `filo-2` e `spento` fanno eccezione, e il perché sta qui sotto
   accanto ai loro valori. È per questo che il tema scuro non è più
   contrastato né più piatto dell'altro: è lo stesso foglio girato.

   L'AMBRA NON SI TOCCA, ed è il punto di tutto: l'accento dice ADESSO, e se
   cambiasse tinta col tema smetterebbe di essere una cosa sola. Sul fondo
   scuro il suo contrasto scende da 3,54 a 2,72 — ma è l'unica cosa colorata di
   tutta la tavola, e su una pagina di soli grigi un arancio non ha bisogno di
   luminanza per farsi vedere.

   NON SI SCRIVE DA NESSUNA PARTE quale tema si è scelto: all'apertura si
   chiede al sistema operativo con `prefers-color-scheme` e si parte da lì.
   Scrivere una preferenza vorrebbe dire toccare il disco di chi ascolta, che
   in questo progetto è una decisione non ancora presa (vedi i materiali del
   paesaggio) e non la si prende per un colore. */
:root[data-tema="scuro"]{
  color-scheme:dark;
  --carta:#20211c;
  --inchiostro:#e7e7e4;
  --su-ambra:var(--inchiostro);
  --inchiostro-2:#9e9e9b;
  /* LE ETICHETTE SCURE SONO INCHIOSTRO TENUE. Il grigio calcolato — #61615f, 2,61
     sulla carta come il grigio chiaro — a schermo scendeva a 2,42 sulla carta
     granita e a 2,21 sul vetro, e le etichette a sette pixel e mezzo non si
     leggevano. Qui il grigio è la tinta subito sopra della palette, non una
     nuova: stessa tinta, un nome in più. Le parole restano un gradino sopra. */
  --grigio:var(--inchiostro-2);
  /* IL MUTO SCURO STA A METÀ STRADA, in chiarezza percepita, fra il grigio di
     prima — che per un'etichetta non bastava — e l'inchiostro tenue delle
     etichette: 3.74 sulla carta a schermo, 3.41 sul vetro. Si legge, e resta un
     gradino sotto. Non può essere inchiostro-2 come il grigio: sul circolo le
     note fuori collezione si scriverebbero come quelle in uso, e una manopola
     spenta avrebbe l'etichetta di una accesa. */
  --muto:#7f7f7b;
  --filo:#3b3b38;
  --filo-2:#33332f;
  /* IL VETRO E I DUE TONI PIÙ TENUI SONO MISURATI SULLO SCHERMO, non scritti.

     Il vetro è l'unica tinta che col tema non si ribalta: rialzato vuol dire più
     chiaro in tutti e due, o sul fondo scuro il piano si leggerebbe come una
     buca. Ma a pari rapporto scritto — 1,08 — era invisibile, e non per un
     errore di conto: la GRANA NON È NEUTRA. Sulla carta chiara la scurisce, su
     quella scura la schiarisce, e misurato #20211c esce a schermo come #262722,
     cioè proprio il vetro calcolato. Il vetro lo disegna il canvas sopra la
     grana, quindi la grana non ce l'ha. Si confronta allora quello che arriva
     all'occhio: sulla carta chiara il vetro sta 3,40 L* sopra la carta granita,
     qui 3,22 — il più vicino fra i valori che ci sono.

     Sopra un piano più chiaro `filo-2` e `spento` sparivano, a 1,01 e 1,05: la
     guida della corona, le tacche non raggiunte delle manopole, i binari delle
     aste. Sono alzati quanto basta perché sul vetro si vedano come si vedevano
     sulla carta a schermo — 1,08 e 1,15 — restando sotto `filo` e in ordine. Sono
     gli unici due toni scuri che non rifanno il rapporto scritto della carta
     chiara, e la ragione è questa. */
  --vetro:#2d2e28;
  --spento:#373733;
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23393936'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- crepuscolo
   CREPUSCOLO COLORA I PIANI PER FUNZIONE con una palette a cinque fasce: salvia
   `#8b9e82`, terracotta `#c4694f`, bordeaux `#6b1e2f`, ocra `#d8b47f`, petrolio
   `#2a5c5f`. È un tema SCURO. La carta è un nero che tira al bordeaux, L* 10, e
   l'inchiostro una crema presa dall'ocra: l'ocra scurita fino a un piano sarebbe
   diventata un bruno qualunque, come inchiostro resta riconoscibile. Gocce
   petrolio, tessuti terracotta scurita al mattone, effetti salvia, banco un
   petrolio spento, deriva e influenze il bordeaux — le stesse funzioni del
   crepuscolo di prima, che veniva dai pannelli di un Mother-32.

   È fatto con la RICETTA SCURA: piani in LCh a L* 23–28 tenendo la tinta, e i
   toni sulla retta fra inchiostro e carta che rifanno sul piano più chiaro i
   rapporti minimi del primo crepuscolo — inchiostro tenue 5,84, etichette 4,40,
   muto 3,29, filo 2,58, spento 2,16, filo-2 1,95 — con retino e vetro a 1,47 e
   1,24 sulla carta.

   L'AMBRA NON CAMBIA NEMMENO QUI: sui piani sta fra 2,3 e 2,7. Sul mattone dei
   tessuti si stacca meno per tinta (ΔE 40), come si staccava sul vinaccia. */
:root[data-tema="crepuscolo"]{
  color-scheme:dark;
  --carta:#23191a;
  --vetro:#342b28;
  --inchiostro:#fbe8d1;
  --inchiostro-2:#d3c2af;
  --grigio:#b8a999;
  --muto:#9f9283;
  --filo:#8b7f73;
  --spento:#7e7367;
  --filo-2:#766c61;
  --su-ambra:var(--inchiostro);
  --piano-gocce:#14494c;
  --piano-tessuti:#633225;
  --piano-effetti:#34472d;
  --piano-banco:#263a3c;
  --piano-deriva:#632330;
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%233f3732'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ meriggio
   MERIGGIO È LA LUCE DI MEZZOGIORNO, da una palette a cinque fasce: petrolio,
   bruno, ruggine, senape, crema. La fascia più larga è la crema, e la crema è la
   carta. Il bruno è l'inchiostro, scurito a L* 16 tenendo la tinta: al valore
   della palette la serigrafia sui piani scendeva a 6, e il bruno vero resta come
   inchiostro tenue. LA RUGGINE È GIÀ L'AMBRA — le due tinte sono quasi lo stesso
   colore — quindi l'accento non cambia nemmeno qui, e non per regola soltanto.

   I piani colorano per funzione come nel crepuscolo, con le tinte della palette
   portate in LCh a L* 78–82, tenendone la tinta: tessuti senape, effetti salvia,
   banco un petrolio spento, gocce il bruno. I QUATTRO PIANI GRANDI STANNO A
   CROCE: la deriva, sotto le gocce, prende la senape dei tessuti, e le influenze,
   sotto i tessuti, il bruno delle gocce — una simmetria rispetto al centro della
   tavola invece di due colonne. Per riferimento e non per copia: chi ritocca un
   colore lo ritocca nei suoi due piani. Le gocce sono state petrolio chiaro e poi
   rosa tenue prima del bruno, e non convincevano.
   PIÙ SCURI NON SI PUÒ: l'ambra sui piani sta a 2,4–2,7, come nel crepuscolo, e
   ogni L* tolto ai piani lo toglie a lei.

   I TONI SONO TARATI CONTRO IL PIANO PIÙ SCURO, sulla retta fra inchiostro e
   carta: etichette 4,2, muto 2,7, filo 2,1, spento 1,65, filo-2 1,42. Sulla
   crema vengono più forti che nel chiaro — i fili a 3,1 — ed è il carattere del
   tema: una stampa, non un foglio velato. Il vetro resta oltre la carta a 1,08,
   ed è il fondo delle tendine che stanno sulla carta. */
:root[data-tema="meriggio"]{
  color-scheme:light;
  --carta:#efe9c8;
  --vetro:#f6f1da;
  --inchiostro:#31261c;
  --inchiostro-2:#4b3c2f;
  --grigio:#5a5445;
  --muto:#77715f;
  --filo:#89836f;
  --spento:#9b957f;
  --filo-2:#a7a28a;
  --su-ambra:var(--carta);
  --piano-gocce:#d3bdab;
  --piano-tessuti:#e9c791;
  --piano-effetti:#b8d0b7;
  --piano-banco:#afc5c8;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23ccc7aa'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------- alba
   ALBA viene dalla prima delle quattro croci: rosa cipria, azzurro acciaio,
   mattone, grigio salvia. È un tema CHIARO. La carta è il grigio salvia portato
   quasi al bianco — la nebbia prima del sole — e l'inchiostro è l'azzurro
   acciaio scurito a L* 16, il blu dell'ora prima. Gocce azzurro, tessuti
   mattone, effetti rosa, banco salvia; deriva e influenze a croce, come in
   meriggio. I toni sono tarati come in meriggio, sul piano più scuro. */
:root[data-tema="alba"]{
  color-scheme:light;
  --carta:#e7ede4;
  --vetro:#f1f5ef;
  --inchiostro:#132a37;
  --inchiostro-2:#244658;
  --grigio:#4e585b;
  --muto:#6d7474;
  --filo:#808685;
  --spento:#939996;
  --filo-2:#9fa5a1;
  --su-ambra:var(--carta);
  --piano-gocce:#a8c8dd;
  --piano-tessuti:#f1b5ad;
  --piano-effetti:#e4c5c7;
  --piano-banco:#c2c8bd;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23c4cac3'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- primavera
   PRIMAVERA viene dalla quarta croce: ruggine, rosa, giallo pallido, oliva. È un
   tema CHIARO. La carta è il rosa portato quasi al bianco, un fiore di pesco, e
   l'inchiostro è l'oliva scurito a L* 16, il verde dell'ombra sotto le foglie.
   Gocce rosa, tessuti giallo — il piano più chiaro, perché un giallo scurito
   diventa kaki —, effetti ruggine, banco oliva; deriva e influenze a croce. */
:root[data-tema="primavera"]{
  color-scheme:light;
  --carta:#fde9eb;
  --vetro:#fef4f5;
  --inchiostro:#27291b;
  --inchiostro-2:#41442e;
  --grigio:#5a5550;
  --muto:#7a716f;
  --filo:#8d8281;
  --spento:#a19594;
  --filo-2:#aea1a1;
  --su-ambra:var(--carta);
  --piano-gocce:#e8bbc0;
  --piano-tessuti:#eadda2;
  --piano-effetti:#e2bbaf;
  --piano-banco:#c3c5b3;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23d7c6c8'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- autunno
   AUTUNNO viene dalla seconda croce: rosso scuro, antracite, arancio, viola. È un
   tema SCURO. La carta è l'antracite portata a L* 10 e l'inchiostro una crema
   presa dall'arancio. Gocce viola, tessuti arancio scurito fino al bruno,
   effetti rosso scuro, banco antracite — il piano più largo resta il più neutro —;
   deriva e influenze a croce. L'arancio non può restare arancio: sotto l'ambra
   sarebbe la stessa tinta alla stessa luce, e il valore non si troverebbe più. I
   toni sono tarati come nel crepuscolo, sul piano più chiaro. */
:root[data-tema="autunno"]{
  color-scheme:dark;
  --carta:#201a1c;
  --vetro:#322b2a;
  --inchiostro:#fee7d2;
  --inchiostro-2:#d2bead;
  --grigio:#b7a597;
  --muto:#9d8e82;
  --filo:#8a7d71;
  --spento:#7c7066;
  --filo-2:#756960;
  --su-ambra:var(--inchiostro);
  --piano-gocce:#4a385b;
  --piano-tessuti:#5b3805;
  --piano-effetti:#653125;
  --piano-banco:#3d383a;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%233e3734'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- inverno
   INVERNO viene dalla terza croce: menta, nero, cremisi, blu petrolio. È un tema
   SCURO. La carta è il nero verdastro e l'inchiostro un bianco preso dalla menta.
   Gocce blu petrolio, tessuti cremisi, effetti menta scurita fino al verde
   bosco, banco il nero schiarito ad ardesia; deriva e influenze a croce. I toni
   sono tarati come nel crepuscolo, sul piano più chiaro. */
:root[data-tema="inverno"]{
  color-scheme:dark;
  --carta:#111b1d;
  --vetro:#252c2c;
  --inchiostro:#e4f1e5;
  --inchiostro-2:#bdc8bf;
  --grigio:#a4afa6;
  --muto:#8d968e;
  --filo:#7b837d;
  --spento:#6f7771;
  --filo-2:#686f6a;
  --su-ambra:var(--inchiostro);
  --piano-gocce:#2d4554;
  --piano-tessuti:#732a28;
  --piano-effetti:#2d4832;
  --piano-banco:#30383a;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23323837'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- mietitura
   MIETITURA viene da una palette a sei colori: petrolio scuro, petrolio, oliva,
   grano, ruggine, salvia. È un tema CHIARO, fatto con la ricetta di meriggio. La
   carta è il grano portato quasi al bianco e l'inchiostro il petrolio scuro a L*
   16. Gocce petrolio, tessuti grano, effetti ruggine, banco oliva; deriva e
   influenze a croce. La ruggine è il colore più vicino all'ambra, e va agli
   EFFETTI, dove l'ambra quasi non c'è: sui tessuti corrono gli archi e i valori. */
:root[data-tema="mietitura"]{
  color-scheme:light;
  --carta:#f9ecd7;
  --vetro:#fcf5ec;
  --inchiostro:#132c2c;
  --inchiostro-2:#224848;
  --grigio:#535751;
  --muto:#75746a;
  --filo:#89857a;
  --spento:#9d988a;
  --filo-2:#aaa495;
  --su-ambra:var(--carta);
  --piano-gocce:#a4ccc6;
  --piano-tessuti:#f0d7a9;
  --piano-effetti:#f4b5a0;
  --piano-banco:#c2c6ad;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23d4c9b8'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------- estate
   ESTATE viene da una palette a cinque fasce: mandarino, verde antracite, grigio
   metallo, osso, arancio. È un tema CHIARO, fatto con la ricetta di meriggio. La
   carta è l'osso e l'inchiostro il verde antracite a L* 16. Gocce grigio metallo,
   tessuti il mandarino schiarito ad albicocca, effetti l'arancio schiarito a
   corallo, banco sabbia; deriva e influenze a croce. Il corallo, più vicino
   all'ambra, sta sugli effetti per la stessa ragione della mietitura. */
:root[data-tema="estate"]{
  color-scheme:light;
  --carta:#f0ebdc;
  --vetro:#f6f3eb;
  --inchiostro:#1d2a2a;
  --inchiostro-2:#324646;
  --grigio:#535551;
  --muto:#72736c;
  --filo:#85847c;
  --spento:#99978d;
  --filo-2:#a6a399;
  --su-ambra:var(--carta);
  --piano-gocce:#b4c8c6;
  --piano-tessuti:#ffc68d;
  --piano-effetti:#ffaf94;
  --piano-banco:#ccc3aa;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23ccc8bc'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ novembre
   NOVEMBRE viene da un tempio sotto la pioggia d'autunno: vermiglio, ardesia,
   tortora, cipria, grigio nebbia. È un tema SCURO, fatto con la ricetta del
   crepuscolo. La carta è l'ardesia a L* 10 e l'inchiostro la cipria. Gocce grigio
   nebbia, tessuti tortora, banco ardesia — la pioggia — e il vermiglio sugli
   EFFETTI, due rettangoli rossi come i portali della foto; deriva e influenze a
   croce. Il vermiglio è la tinta più vicina all'ambra di tutti i temi, ΔE 29, e
   sugli effetti l'ambra compare solo nelle cifre delle manopole. */
:root[data-tema="novembre"]{
  color-scheme:dark;
  --carta:#1b1c17;
  --vetro:#2f2d28;
  --inchiostro:#fae7df;
  --inchiostro-2:#d3c3bc;
  --grigio:#b7a9a3;
  --muto:#9d928c;
  --filo:#8a807a;
  --spento:#7c736e;
  --filo-2:#756c68;
  --su-ambra:var(--inchiostro);
  --piano-gocce:#2f464c;
  --piano-tessuti:#513e33;
  --piano-effetti:#722712;
  --piano-banco:#373830;
  --piano-deriva:var(--piano-tessuti);
  --piano-influenze:var(--piano-gocce);
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%233b3834'/%3E%3C/svg%3E");
}

/* La grana della carta: rumore frattale generato dal browser, non un'immagine
   da scaricare. È un SVG scritto qui dentro come data URI, quindi la pagina
   continua ad aprirsi senza rete — che è una regola del progetto, non una
   comodità. */
:root{
  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.08'/%3E%3C/svg%3E");
  /* La retinatura del disegno tecnico: punti su griglia, mangiati da una
     macchia di rumore così che non coprano il foglio in modo uniforme. */
  --retino:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.05' fill='%23c6c5b8'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--carta);
  background-image:var(--grana);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------ il foglio */
.foglio{position:relative;max-width:1440px;margin:0 auto;padding:34px 40px 26px}
#tavola{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0}
.sopra{position:relative;z-index:1}

/* -------------------------------------------------------------------- i piani
   IL VETRO LO DISEGNA IL CANVAS, non il foglio di stile, e non è una scelta di
   gusto: il canvas sta SOTTO i comandi, quindi un fondo messo qui su un
   elemento coprirebbe il quadrante che il canvas gli disegna dietro. Qui stanno
   solo le misure — quanto il piano sporge dal riquadro dell'elemento marcato
   `[data-piano]` — perché l'impaginazione resta tutta in questo file.

   Le sporgenze sono prese dagli spazi che ci sono già e non ne chiedono uno in
   più. Di lato quattordici, dentro i ventisette fra una colonna e l'altra, cioè
   tredici dal filo verticale in mezzo alle classi; SOPRA IL PIANO SI FERMA ALLA
   STESSA DISTANZA, tredici pixel dal filo che gli sta sopra, e sotto a otto da
   quello che gli sta sotto. Prima sopra erano cinque: accanto ai tredici di lato
   l'occhio li confrontava, e il piano sembrava schiacciato contro il filo. Una
   banda parte con il filo in testa, quindi lì il piano rientra. */
:root{--piano-smusso:9px}
[data-piano]{--piano-sopra:0px;--piano-lato:14px;--piano-sotto:8px}
/* I due piani di una classe non sporgono né sopra né sotto: l'aria la danno i
   vani da dentro, e fra due piani c'è il `gap` del quadrante. Solo il cerchio
   sale, fino a tredici pixel dal filo della testata. */
.vano[data-piano]{--piano-sotto:0px}
.vano.cerchio[data-piano]{--piano-sopra:9px}
/* Il piano del banco è la banda stessa, che comincia SUL filo: rientra di
   quattordici, e il filo più il vuoto fanno tredici più uno. */
.banda[data-piano]{--piano-sopra:-14px}
/* Il pannello della deriva comincia dentro la sua banda, dopo il filo e il suo
   padding: sette in su lo fermano a tredici pixel dal filo, come gli altri. */
.pannello-deriva[data-piano],.pannello-influenze[data-piano]{--piano-sopra:7px}
/* Sotto, i due pannelli si allungano di dieci pixel da dentro: l'inchiostro più
   basso — le targhette dell'ultima riga delle influenze — stava a cinque dal bordo
   e il fa♯ in fondo al circolo a dodici, contro i quattordici di lato. Ora le
   targhette ne hanno quindici e il circolo ventidue. È un padding e non una
   sporgenza, così il piede scende con loro e resta alla sua distanza. */
.pannello-deriva,.pannello-influenze{padding-bottom:10px}
/* Il colore di ogni piano: un token per sezione, che in chiaro e scuro è vetro.
   Il canvas lo legge da `--piano-tinta`, e lo rilegge quando il tema cambia. */
.quadrante.gocce .vano.cerchio{--piano-tinta:var(--piano-gocce)}
.quadrante.tessuti .vano.cerchio{--piano-tinta:var(--piano-tessuti)}
.vano.effetti{--piano-tinta:var(--piano-effetti)}
.banda[data-piano]{--piano-tinta:var(--piano-banco)}
.pannello-deriva{--piano-tinta:var(--piano-deriva)}
.pannello-influenze{--piano-tinta:var(--piano-influenze)}

/* ------------------------------------------------------------------- caratteri
   Un ruolo, una classe. Le dimensioni sono quelle del disegno e non si
   arrotondano: 7,5 px con una spaziatura larga è una cosa diversa da 8. */
.et{font-family:var(--mono);font-size:7.5px;letter-spacing:.22em;color:var(--grigio);
    text-transform:none;line-height:1.2}
.fl{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;color:var(--grigio);
    text-transform:uppercase;line-height:1.2}
/* I VALORI SONO IN AMBRA, le etichette restano grigie e le parole inchiostro.
   È la seconda cosa che l'accento dice, e le due non si confondono perché non
   stanno sulla stessa superficie: sul CANVAS l'ambra è ADESSO — la goccia
   appena scattata, la tenuta appena entrata, i fili che le legano al mirino —
   nel TESTO è un numero che cambia. Chi guarda i cerchi legge un tempo, chi
   guarda le colonne legge una misura; nessuno deve tenere a mente due chiavi
   nello stesso posto.

   Sulla carta chiara l'ambra sta a 3,54 di contrasto, sopra le etichette in grigio
   a 2,61: i numeri sono la cosa più leggibile della colonna. Nel tema scuro no:
   le etichette sono salite all'inchiostro tenue, 6,03, perché a 2,6 sulla carta
   granita non si leggevano, e l'ambra — 3,70 — resta sotto di loro. Là un valore
   si fa trovare con la tinta e non con la luminanza, che è quello che un arancio
   fa comunque su una pagina di soli grigi. */
.vl{font-family:var(--mono);font-size:8px;color:var(--ambra);
    font-variant-numeric:tabular-nums;line-height:1.2}
/* IL VALORE VIVO STA IN UNA TARGHETTA, e viene dal mockup «Hiroshi · console»:
   ambra a fondo pieno, cifre chiare. Vivo vuol dire che cambia DA SÉ — il tempo
   della seduta, il picco, il limitatore, la deriva — e non perché una mano ha
   mosso un cursore. LA MANO SCRIVE IN RIGA, LO STRUMENTO IN TARGHETTA: le targhe
   dei filetti, delle manopole e del mixer restano cifre in ambra sulla carta, e
   la distanza fra le due cose si vede da lontano. È la stessa separazione che
   c'è fra la corona e il filetto, fra l'efficace e la mano.

   Il fondo è uno pseudo-elemento che sporge dalla cifra, come il riempimento di
   una scelta: il valore resta grande quanto il suo testo e niente si sposta. Le
   cifre sono chiare nei due temi perché l'ambra non cambia col tema e quello che
   ci sta sopra nemmeno. Una targhetta vuota non si disegna: sarebbe una macchia
   d'ambra che non dice niente. */
.vl.vivo{position:relative;z-index:0;color:var(--su-ambra);font-weight:500}
.vl.vivo::before{content:"";position:absolute;z-index:-1;inset:-3px -5px;
  background:var(--ambra);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.vl.vivo:empty::before{display:none}
.mn{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--inchiostro);line-height:1.2}
.grigio{color:var(--grigio)}

/* ------------------------------------------------------------------ la testata */
/* LA TESTATA VA A CAPO DA SÉ e non a una larghezza decisa qui. Con
   `flex-wrap` e un'altezza MINIMA invece che fissa, la riga resta di
   cinquantanove pixel finché ci sta e si spezza quando non ci sta più: non c'è
   nessun numero da tenere in pari con la larghezza del marchio o con quanti
   comandi ci sono. Il marchio allargato di un terzo l'aveva fatta sbordare
   fra i 760 e i 950 px — dove la riga non ci stava già prima e nessuna media
   query interveniva ancora. */
.testata{display:flex;align-items:center;justify-content:space-between;
         gap:14px 26px;flex-wrap:wrap;min-height:59px;
         border-bottom:1px solid var(--filo)}
/* LE TRE PARTI SI STRINGONO ATTORNO AL FILO, e i due margini non sono uguali
   perché il risultato lo sia. Sopra il filo c'è un blocco di testo di
   diciassette pixel con dentro maiuscole alte 12,75: sotto le lettere avanzano
   già 2,75 px di piombo. Sotto il filo c'è un blocco di dodici con dentro
   minuscole, e di aria sopra ne avanza 1,50. Misurati sull'inchiostro vero,
   non sui riquadri. Un `gap` uguale dalle due parti darebbe quindi due vuoti
   diversi — ed era il caso di prima, 8,75 sopra e 7,50 sotto: si vedeva che il
   nome stava più staccato di rada e studio senza che si capisse perché.
   Azzerato il gap, 1,25 e 2,50 di margine lasciano 3,75 sopra e 4,50 sotto.
   Non 4 e 4: la somma dei due margini decide quanto è alto il marchio, ma DOVE
   ci cade dentro il filo lo decide la griglia dei pixel dello schermo, e la
   coppia successiva — 1,5 e 2,25 — dà 4,75 e 3,50, cioè uno scarto peggiore.
   Fra i valori che si possono davvero ottenere questa è la più pari; misurato
   sull'inchiostro, non calcolato. */
.logo{display:flex;flex-direction:column;gap:0;flex:none}
/* IL MARCHIO SI ALLARGA CON LA SPAZIATURA, non col corpo. Le sette lettere
   restano di diciassette pixel — il peso del nome sulla pagina è quello, e
   ingrandirle vorrebbe dire cambiare quanto conta rispetto alle sezioni
   numerate — mentre il vuoto fra l'una e l'altra si apre fin dove serve. Il
   conto è esatto: i glifi misurano 66,14 px e le spaziature interne sono sei,
   quindi 66,14 + 6 × 1,04 em × 17 = 172,2, cioè un terzo più di 129,4.

   `margin-right` è sempre l'OPPOSTO della spaziatura: `letter-spacing` aggiunge
   il vuoto anche dopo l'ultima lettera, e senza toglierlo il filo qui sotto
   sporgerebbe di una spaziatura buona oltre la I finale — che a 1,04 em si
   vede. Chi tocca uno dei due numeri tocchi anche l'altro. */
.nome{font-size:17px;font-weight:300;letter-spacing:1.04em;text-transform:uppercase;
      line-height:1;margin-right:-1.04em}
.filo{height:1px;background:var(--filo);margin:1.25px 0 2.5px}
/* Sotto il filo le due parole stanno agli estremi, e con un marchio più largo
   l'una si allontana dall'altra da sé: la spaziatura interna cresce un po'
   perché non sembrino due parole strette in mezzo a un vuoto grande. */
.sotto{display:flex;align-items:center;justify-content:space-between;
       font-size:12px;letter-spacing:.24em;color:var(--grigio);line-height:1;margin-right:-.24em}
/* Le due «d» di rada e studio in ambra. Sono la stessa lettera nelle stesse due
   parole, alla stessa altezza: accese fanno una rima che tiene insieme la riga,
   e il punto che pulsa nel mezzo diventa il terzo di tre segni invece di essere
   l'unico. */
.sotto b{font-weight:inherit;color:var(--ambra)}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.34}}
.punto{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ambra);
       animation:pulsa 2.6s ease-in-out infinite}
.governo{display:flex;align-items:center;gap:20px}
.divisore{width:1px;height:12px;background:var(--filo);flex:none}

/* Una spunta è un quadrato che si riempie d'inchiostro: acceso non è mai un
   colore, perché il colore dice l'altezza e non può dire anche lo stato. */
.chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
      font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--inchiostro);background:none;border:0;padding:0;line-height:1}
.chip input{appearance:none;width:9px;height:9px;margin:0;flex:none;
            border:1px solid var(--inchiostro);background:transparent;border-radius:0;cursor:pointer}
.chip input:checked{background:var(--inchiostro)}
.chip input:disabled{border-color:var(--muto);cursor:default}
.chip:has(input:disabled){color:var(--muto);cursor:default}
.chip input:focus-visible{outline:1px solid var(--ambra);outline-offset:2px}
.chip.pieno input{width:7px;height:7px}
/* LE LINGUE sono un gruppo di pulsanti veri, che si prendono col tasto Tab e che
   un lettore di schermo annuncia come premuti. La parola è l'opzione, non lo
   stato di adesso — quello lo dice quale è a inchiostro pieno. I TEMI invece sono
   quattro, e quattro parole in fila accanto a quattro lingue erano otto
   pulsanti dello stesso peso: stanno in una tendina come le altre. È LARGA
   QUANTO LA SUA VOCE PIÙ LUNGA, in tutte e quattro le lingue, così cambiare tema
   non sposta la testata. */
.lingue{display:flex;gap:19px}
.tendina.temi{width:104px;flex:none}
.lingua{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--muto);
        background:none;border:0;padding:0;cursor:pointer}
/* LA SCELTA SI RIEMPIE D'INCHIOSTRO, e la parola diventa carta. Il riempimento
   è uno pseudo-elemento che sporge dal pulsante invece di un padding: il
   pulsante resta grande quanto la sua parola e niente intorno si sposta. A
   destra sporge un po' meno, perché la spaziatura mette già un vuoto dopo
   l'ultima lettera. Gli angoli sono smussati come i piani, e l'ambra qui non
   entra: dice un valore, non una scelta. */
.lingua[aria-pressed=true]{color:var(--carta);position:relative;z-index:0}
.lingua[aria-pressed=true]::before{content:"";position:absolute;z-index:-1;
  inset:-4px calc(.18em - 6px) -4px -6px;background:var(--inchiostro);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.lingua:focus-visible{outline:1px solid var(--ambra);outline-offset:3px}

/* -------------------------------------------------------------------- le bande */
/* Il padding sopra è quello di prima più otto: i piani stanno a tredici pixel dal
   filo che hanno sopra, quanto dal filo verticale che hanno di lato (vedi i piani),
   e i contenuti sono scesi con loro. Il paesaggio, che un piano non ce l'ha,
   scende lo stesso, così le sei intestazioni stanno alla stessa distanza dal
   loro filo. */
.banda{border-top:1px solid var(--filo);margin-top:16px;padding-top:20px}
.banda.classi{border-top:0;margin-top:0;padding-top:22px}
.capo{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.capo .titolo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
/* I NUMERI DI SEZIONE sono numeri, quindi vanno in ambra come tutti gli
   altri. Erano il grado più tenue della palette — un'insegna da leggere una
   volta e poi dimenticare — e in accento diventano invece la mappa: cinque
   punti fermi che si trovano scorrendo il foglio senza leggere una parola. */
.capo .num{font-family:var(--mono);font-size:13px;font-weight:200;color:var(--ambra)}
.capo .voce{font-size:11px;font-weight:400;letter-spacing:.30em;text-transform:uppercase}
.capo .dida{font-family:var(--mono);font-size:8px;letter-spacing:.10em;color:var(--grigio)}
/* Anche i numeri dentro una didascalia: i quattro periodi di una classe sono
   valori, e stanno in un `b` proprio per poterli distinguere da quello che li
   circonda. Sotto «gocce» e «tessuti» intorno non c'è più prosa ma soltanto la
   punteggiatura della serie — [7·11·13·17] — e quella è INCHIOSTRO: nera sulla
   carta, chiara sul fondo scuro, senza una riga in più per il tema. */
.dida b{font-weight:inherit;color:var(--ambra)}
.dida.periodi i{font-style:normal;color:var(--inchiostro)}
.dida.periodi .sep{margin:0 .3em}
.letture{display:flex;align-items:baseline;gap:22px}
.lettura{display:flex;align-items:baseline;gap:8px}
.lettura .vl{font-size:8.5px}

/* ---------------------------------------------------------------- le due classi
   Cinque colonne: comandi, quadrante, filo, quadrante, comandi. Il filo in
   mezzo non chiude niente — dice soltanto che i due quadranti sono due cose e
   non una sola larga. */
.classi{display:grid;grid-template-columns:205px minmax(0,1fr) 1px minmax(0,1fr) 205px;
        gap:0 27px;padding-top:0}
.filoV{background:var(--filo);width:1px;justify-self:center}
.colonna{display:flex;flex-direction:column;gap:18px}
/* Le righe delle linee chiudono la colonna alla stessa altezza in cui l'ultimo
   piano chiude il quadrante: il vuoto che avanza va tutto sopra di loro, fra i
   comandi del suono e i comandi per linea, che sono due cose diverse. */
.colonna>.gruppo:last-child{margin-top:auto}
.intesta{display:flex;align-items:flex-start;gap:14px}
/* L'intestazione dei tessuti è lo SPECCHIO di quella delle gocce: il numero sul
   filo destro della colonna, il titolo e i periodi giustificati contro di lui.
   In una riga rovesciata l'inizio è a destra, quindi `flex-start`: con
   `flex-end` il blocco finiva spinto a sinistra. La spaziatura mette un vuoto
   anche dopo l'ultima lettera, e il margine negativo lo toglie — la stessa
   ragione del marchio — o «TESSUTI» e la parentesi chiusa starebbero un pelo più
   in qua del bordo che dicono di toccare. */
.colonna.destra .intesta{flex-direction:row-reverse;justify-content:flex-start;text-align:right}
.colonna.destra .intesta .voce{margin-right:-.30em}
.colonna.destra .intesta .dida{margin-right:-.10em}
.intesta .num{font-family:var(--mono);font-size:28px;font-weight:200;letter-spacing:-.02em;
              color:var(--ambra);line-height:.85}
.intesta .voce{font-size:12px;font-weight:400;letter-spacing:.30em;text-transform:uppercase;
               line-height:1.15;display:block}
.intesta .dida{font-family:var(--mono);font-size:8px;letter-spacing:.10em;color:var(--grigio);
               display:block;margin-top:7px}

.gruppo{display:flex;flex-direction:column;gap:11px}
.gruppo>.et{margin-bottom:-2px}

/* ------------------------------------------------------------------- i filetti
   Etichetta a sinistra, valore a destra, e sotto la corsa: un filo con un
   quadrato d'inchiostro. È l'unico comando lineare di tutta la tavola e
   compare identico dappertutto — nella forma del suono, sotto i quadranti,
   nella fascia dei grani.

   La parte percorsa si scrive con `--u`, che il JavaScript aggiorna a ogni
   tocco: un filo che non annerisce dietro al quadrato non dice da che parte
   si sta andando. */
.filetto{display:grid;grid-template-columns:1fr auto;align-items:baseline;
         gap:6px;--u:0}
.filetto>input[type=range]{grid-column:1/-1;margin-top:5px}

input[type=range]{appearance:none;width:100%;height:7px;background:transparent;
                  margin:0;display:block;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{
  height:1px;background:linear-gradient(90deg,var(--inchiostro) 0 calc(var(--u)*100%),
                                        var(--filo) calc(var(--u)*100%) 100%)}
input[type=range]::-moz-range-track{height:1px;background:var(--filo)}
input[type=range]::-moz-range-progress{height:1px;background:var(--inchiostro)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:6px;height:7px;
  background:var(--inchiostro);border:0;border-radius:0;margin-top:-3px}
input[type=range]::-moz-range-thumb{width:6px;height:7px;background:var(--inchiostro);
  border:0;border-radius:0}
input[type=range]:focus-visible{outline:1px solid var(--ambra);outline-offset:3px}

/* ------------------------------------------------------------------- le tendine
   LA TENDINA CHIUSA È UNA TARGA SMUSSATA, e quella aperta è un piano di vetro:
   tutte e due vengono dalle proposte «Hiroshi · tendine». Chiusa, è un piccolo
   piano con due angoli tagliati, come i pannelli e le scelte — sulla carta è
   vetro, su un piano è carta, ed è `--sotto` a scambiarli. Presa col tasto Tab o
   aperta si riempie d'inchiostro, come una scelta.

   RESTA UN `select` NATIVO, e la lista aperta la disegna il browser stesso con
   `appearance: base-select`: stessa tastiera, stesso lettore di schermo, nessuna
   lista finta scritta a mano. Dove il browser non lo sa fare — oggi fuori da
   Chromium — resta il menù di sistema, e la targa chiusa non cambia. E SOLO CON
   UN PUNTATORE FINE: su un telefono il menù di sistema è la ruota, che è meglio
   di qualunque lista disegnata, e quella non si tocca.

   Il triangolo sta nel contenitore e non nel `select`, perché un `select` non ha
   pseudo-elementi che valgano in ogni browser: la sua altezza è misurata sulla
   targa, quindi chi cambia il padding cambia anche `bottom`. */
.tendina{position:relative;display:block;--sotto:var(--vetro)}
[data-piano] .tendina{--sotto:var(--carta)}
.tendina select{font-family:var(--sans);font-size:15px;font-weight:300;letter-spacing:.04em;
                color:var(--inchiostro);background:var(--sotto);border:0;border-radius:0;
                padding:6px 26px 7px 10px;appearance:none;width:100%;cursor:pointer;
                clip-path:polygon(5px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 5px)}
.tendina::after{content:"";position:absolute;right:11px;bottom:14px;width:6px;height:4px;
                pointer-events:none;background:var(--inchiostro);
                clip-path:polygon(0 0,100% 0,50% 100%)}
.tendina.piccola select{font-size:9.5px;letter-spacing:.10em;font-family:var(--mono);
                        padding:4px 22px 5px 8px}
.tendina.piccola::after{right:9px;bottom:10.5px;width:5px;height:3px}
/* Il contorno del fuoco lo taglierebbe lo smusso: la targa presa si riempie
   d'inchiostro invece di disegnarsi un bordo. */
.tendina select:focus-visible{outline:none;background:var(--inchiostro);color:var(--carta)}
.tendina:has(select:focus-visible)::after{background:var(--carta)}

@supports (appearance: base-select) {
  @media (hover:hover) and (pointer:fine) {
    .tendina select,.tendina select::picker(select){appearance:base-select}
    .tendina select::picker-icon{display:none}
    .tendina select:open{background:var(--inchiostro);color:var(--carta)}
    .tendina:has(select:open)::after{background:var(--carta)}
    /* La lista ha il fondo della sua targa — vetro sulla carta, carta sul vetro —
       e lo stesso smusso, un poco più largo perché il piano è più grande. */
    .tendina select::picker(select){background:var(--sotto);color:var(--inchiostro);border:0;
      padding:6px 0;margin-block:3px;
      clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
    .tendina option{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.10em;
                    padding:5px 14px;color:var(--inchiostro);background:transparent}
    .tendina option:hover,.tendina option:focus-visible{background:var(--filo-2);outline:none}
    .tendina option:checked{background:var(--inchiostro);color:var(--carta)}
    .tendina option::checkmark{display:none}
  }
}

/* --------------------------------------------------------------- i quadranti
   Il canvas disegna dentro questi riquadri: il JavaScript ne legge la
   posizione a ogni fotogramma, così l'impaginazione resta tutta qui e il
   disegno non ha misure sue.

   Sopra il quadrante stanno tre comandi trasparenti, uno per corona. Non si
   vedono perché il loro disegno è la corona stessa: si prendono col dito, col
   puntatore e col tasto Tab, e allora compare il filo di messa a fuoco. */
/* DUE PIANI PER CLASSE, uno sotto l'altro: il cerchio con le sue due manopole,
   e l'effetto. Fra i due lo stesso vuoto che separa due gruppi nella colonna dei
   comandi, diciotto pixel. I vani sono larghi quanto il cerchio e non oltre, così
   i bordi dei piani cadono sulla stessa verticale a qualunque larghezza; l'aria
   dentro il piano è il loro padding, non una sporgenza. */
.quadrante{position:relative;display:flex;flex-direction:column;gap:18px}
.vano{width:100%;max-width:460px;margin:0 auto}
/* Il padding non è simmetrico perché l'inchiostro non lo è. Le due manopole
   restano dov'erano quando avevano un piano loro, trentaquattro pixel sotto il
   cerchio, e sotto le loro etichette il piano chiude a diciassette: la stessa
   aria di prima. Nel piano dell'effetto la tendina sta quattro pixel più in giù
   del suo vano, quindi sopra dieci e sotto quattordici. Misurato
   sull'inchiostro, non sui riquadri. */
.vano.cerchio{padding-bottom:17px}
.vano.cerchio .sotto-quadrante{margin-top:34px}
.vano.effetti{display:flex;flex-direction:column;gap:8px;padding:10px 0 14px}
/* Il quadrante non cresce oltre una certa misura: su uno schermo largo
   diventerebbe un cerchio da mezzo metro con quattro anelli lontanissimi, e la
   fase di una linea si leggerebbe peggio, non meglio. */
.tela-quadrante{position:relative;width:100%;max-width:460px;margin:0 auto;padding-bottom:min(100%,460px)}
/* LE MANOPOLE STANNO SU UNA GRIGLIA A SESTI. Le due di sopra hanno il centro a un
   terzo e a due terzi, le tre dell'effetto a un sesto, a metà e a cinque sesti:
   ognuna delle due cade esattamente fra due delle tre. Messe in fila ciascuna
   col suo `gap` centrato, le due righe non avevano niente in comune e i centri
   capitavano dove capitavano. Le colonne sono frazioni, quindi la regola regge
   a qualunque larghezza. */
.sotto-quadrante{display:grid;grid-template-columns:1fr 2fr 2fr 1fr;justify-items:center}
.sotto-quadrante>.manopola:first-child{grid-column:2}
.sotto-quadrante.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.sotto-quadrante.tre>.manopola:first-child{grid-column:auto}

/* ------------------------------------------------------------------ l'inserto
   La tendina dell'effetto apre il suo piano, e sotto ci sono le tre manopole che
   cambiano nome con lei. Il piano sta sotto quello delle due manopole e non
   insieme: quelle stanno DENTRO il suono — registro, calore, passo — queste gli
   vengono DOPO. Prima lo diceva una linea; adesso lo dice il vuoto fra due
   piani, che è la stessa cosa senza un segno in più. */
.inserto{display:flex;align-items:center;justify-content:center;gap:12px}
.inserto .et{margin:0}
.inserto .tendina{width:150px}

/* ------------------------------------------------------------------ le manopole
   Un arco graduato e un quadrato che ci corre sopra. Il disegno lo fa il
   canvas; il comando è un cursore nativo teso sopra l'arco, invisibile finché
   non lo si mette a fuoco. Orizzontale, perché una manopola si gira. */
.manopola{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.manopola .quadro{position:relative;width:100px;height:100px}
.manopola .quadro input{position:absolute;left:0;top:50%;width:100%;height:30px;
                        transform:translateY(-50%);opacity:0;cursor:ew-resize}
.manopola .quadro input:focus-visible{opacity:1}
/* L'etichetta sale DENTRO la bocca dell'arco, dove il disegno non arriva: il
   punto più basso della corsa sta a tre quarti del riquadro, e sotto restava un
   quarto vuoto che staccava il nome dalla manopola a cui appartiene. */
.manopola .fl{text-align:center;margin-top:-16px}
/* Una manopola che l'effetto scelto non usa: il disegno la spegne da sé, qui si
   spengono le due scritte e il cursore smette di prendere il fuoco. */
.manopola.spenta .fl,.manopola.spenta .vl{color:var(--muto)}
.manopola.spenta .quadro input{cursor:default}
.manopola .vl{font-size:8.5px}

/* --------------------------------------------------------------- le otto linee
   Quattro righe per classe: il numero, la durata del giro, il silenzio e una
   idea nuova. Il disegno non ha modo di farle — sono comandi per una linea
   sola — e la tavola le nomina sugli anelli con le stesse cifre. */
.linee{display:flex;flex-direction:column;gap:6px}
.linea{display:grid;grid-template-columns:9px minmax(0,1fr) 34px auto auto;
       align-items:center;gap:8px}
.linea .n{font-family:var(--mono);font-size:7.5px;color:var(--muto);text-align:center}
.linea .vl{font-size:7.5px;text-align:right}
.tasto{font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;
       color:var(--grigio);background:transparent;border:1px solid var(--filo);border-radius:0;
       padding:2px 5px;cursor:pointer;line-height:1}
.tasto:hover{color:var(--inchiostro);border-color:var(--inchiostro)}
.tasto[aria-pressed=true]{background:var(--inchiostro);border-color:var(--inchiostro);
                          color:var(--carta);
                          clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)}

/* ------------------------------------------------------------------- il banco */
.banco{display:grid;grid-template-columns:205px minmax(0,1fr) 205px;gap:0 27px;padding-top:8px}
.registrazione{display:flex;flex-direction:column;gap:9px}
.cronometro{font-family:var(--mono);font-size:21px;font-weight:200;letter-spacing:.03em;
            font-variant-numeric:tabular-nums;line-height:1;color:var(--ambra)}
.misuratore{width:100%;height:16px;position:relative}
/* SOTTO I MISURATORI le due manopole del limitatore. Sono due in una colonna da
   205, quindi due colonne uguali e i centri a un quarto e a tre quarti: la
   griglia a sesti delle classi serve a far coincidere DUE righe di manopole, e
   qui la riga è una sola. Il quadro è più piccolo di quello delle classi — 74
   invece di 100 — perché due da cento in una colonna da duecentocinque si
   toccherebbero. */
.sotto-misuratore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                  justify-items:center;margin-top:-4px}
/* Il tetto della registrazione: una misura, quindi la stessa scrittura delle
   misure che stanno sui tasti. Sale sotto la tendina — il vuoto di nove pixel
   della colonna qui separerebbe una cosa dal suo numero. */
.registrazione .misura{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;
                       color:var(--grigio);margin-top:-5px}
/* La tendina delle tracce prende la colonna e non oltre: sotto i 1180 px la
   colonna della registrazione si allarga a tutta la riga, e una tendina larga
   mezzo schermo per quattro parole non è una tendina, è una fascia. */
.registrazione .tendina{width:100%;max-width:205px}
.manopola.piccola .quadro{width:74px;height:74px}
.manopola.piccola .fl{margin-top:-12px}
.riga-comando{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline;
              background:none;border:0;padding:0;width:100%;text-align:left;cursor:pointer;
              font:inherit}
.riga-comando:disabled{cursor:default}
.riga-comando:disabled .mn{color:var(--muto)}
.riga-comando:hover:not(:disabled) .mn{color:var(--ambra)}
.riga-comando .misura{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;
                      color:var(--grigio)}
.taglio{height:1px;background:var(--filo);margin:4px 0}

/* L'equalizzatore: lo spettro sopra, le otto aste sotto. Le aste sono cursori
   nativi messi in verticale — `writing-mode` e non una rotazione, perché una
   rotazione lascia il rettangolo del fuoco dov'era. */
/* LE TRE COLONNE DEL BANCO FINISCONO ALLA STESSA ALTEZZA, e a deciderla è la
   registrazione: è la colonna col contenuto fisso — tasto, cronometro,
   misuratori, tracce, limitatore — mentre l'equalizzatore e il mixer hanno aste,
   e un'asta è un cursore, cioè una cosa che sta bene lunga quanto le si dà.
   Quando la registrazione è cresciuta, le altre due sono rimaste corte e sotto è
   apparso il vuoto; adesso le aste sono ALTE QUANTO SERVE A RIEMPIRLO — 160 px le
   otto dell'equalizzatore sotto uno spettro passato da 84 a 100, 196 px le
   quattro del mixer — e i tre fondi cadono sullo stesso pixel.

   SONO MISURE SCRITTE, e non un `flex:1` che se le prenda da sé: provato, e non
   funziona. Le colonne stanno in una griglia le cui righe si misurano sul
   contenuto, quindi un figlio che cresce per riempire la riga fa crescere la
   riga — misurato, la colonna passava da 278 a 1310 px, cioè il banco si
   allungava fino a mangiare la pagina. Chi cambia l'altezza della colonna di
   sinistra rifaccia i conti qui, e li verifichi col righello: in giapponese la
   registrazione è due pixel più alta, ed è tutto lo scarto che resta.
   Il canvas non c'entra: legge i riquadri, e disegna dove li trova. */
.eq{display:flex;flex-direction:column}
.spettro{width:100%;height:100px}
.scala-eq{display:grid;grid-template-columns:repeat(8,1fr);height:14px;align-items:center}
.scala-eq span{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:var(--grigio);
               text-align:center}
.aste{display:grid;grid-template-columns:repeat(8,1fr);height:164px;align-items:center;
      justify-items:center;position:relative}
.asta{position:relative;height:164px;display:flex;align-items:center;justify-content:center}
input[type=range].verticale{writing-mode:vertical-rl;direction:rtl;width:14px;height:86px}
.aste input[type=range].verticale{height:160px}
input[type=range].verticale::-webkit-slider-runnable-track{
  width:1px;height:100%;background:var(--filo-2)}
input[type=range].verticale::-webkit-slider-thumb{width:9px;height:7px;margin-top:0;margin-left:-4px}
input[type=range].verticale::-moz-range-track{width:1px;background:var(--filo-2)}
input[type=range].verticale::-moz-range-thumb{width:9px;height:7px}

.mixer{display:flex;flex-direction:column;gap:12px}
/* Quattro colonne e non cinque: il quinto posto era delle VOCI, e quando se ne
   sono andate è rimasto vuoto — le quattro aste stavano spinte a sinistra e
   l'ultimo quinto della colonna era aria. Con quattro, ciascuna ha dieci pixel
   in più e le etichette non si toccano. */
.faders{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;gap:0}
.faders input[type=range].verticale{height:196px}
.fader{display:flex;flex-direction:column;align-items:center;gap:8px}
.fader .fl{font-size:7px;letter-spacing:.10em}
.fader .vl{font-size:7.5px}
/* L'ON di una sorgente sotto il suo canale: lo stesso tasto del muto di una
   linea, premuto quando la sorgente è accesa. */
.fader .tasto{margin-top:5px;padding:3px 7px}

/* --------------------------------------------------------------- il paesaggio
   La fascia porta sopra due cursori nativi trasparenti: l'inizio del segmento
   sul bordo di sopra, la fine su quello di sotto. Stanno uno per lato e non
   sovrapposti perché due cursori distesi sullo stesso rettangolo se li
   prenderebbe sempre quello davanti. */
/* LA RIGA DEL PAESAGGIO sta sulla griglia delle classi — 205, la materia, 205 —
   così le letture cadono sotto la colonna delle gocce e la manopola sotto quella
   dei tessuti. La riga è alta quanto la manopola e l'onda ci sta in mezzo: sopra e
   sotto resta lo spazio delle due maniglie, che il canvas disegna fuori dalla
   fascia. */
.riga-paesaggio{display:grid;grid-template-columns:205px minmax(0,1fr) 205px;gap:0 27px;
                align-items:center;margin-top:10px}
.fascia-paesaggio{width:100%;height:82px;position:relative}
/* LE CINQUE LETTURE sono una scelta sola fra cinque, quindi pulsanti veri con
   `aria-pressed`, come le lingue: la lettura scelta si riempie
   d'inchiostro. Le frecce sono notazione e non si traducono. Presa col tasto Tab,
   la scelta tiene il suo filo di fuoco DENTRO lo smusso, o lo smusso lo taglierebbe. */
.modi-lettura{display:flex;flex-direction:column;gap:5px}
.modi-lettura .et{margin-bottom:3px}
.modo{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:3px 8px;
      appearance:none;background:transparent;border:1px solid var(--filo);border-radius:0;
      font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--grigio);line-height:1.2;text-align:left;cursor:pointer}
.modo i{font-style:normal;width:10px;flex:none;text-align:center;letter-spacing:0;color:var(--inchiostro-2)}
.modo:hover{color:var(--inchiostro);border-color:var(--inchiostro)}
.modo[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:var(--carta);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.modo[aria-pressed="true"] i{color:var(--carta)}
.modo:focus-visible{outline:1px solid var(--ambra);outline-offset:2px}
.modo[aria-pressed="true"]:focus-visible{outline:1px solid var(--carta);outline-offset:-3px}
.lato-paesaggio{display:flex;justify-content:center}
.fascia-paesaggio .maniglia{position:absolute;left:0;width:100%;height:18px;
                            appearance:none;background:transparent;opacity:0;cursor:ew-resize}
.fascia-paesaggio .maniglia.alto{top:-5px}
.fascia-paesaggio .maniglia.basso{bottom:-5px}
.fascia-paesaggio .maniglia:focus-visible{opacity:1;outline:1px solid var(--ambra)}
.comandi-paesaggio{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
                   gap:0 26px;padding-top:26px}

/* ------------------------------------------------------------------- la deriva
   Un pannello a sinistra, sulle prime due colonne della griglia delle classi:
   largo quanto la colonna delle gocce più il suo quadrante, così i bordi del
   vetro cadono sulle verticali dei piani di sopra. Nelle due colonne di destra,
   a specchio, le influenze.

   Dentro, la stessa griglia in piccolo: il circolo nella colonna da 205, le note
   in uso, le letture e il baricentro nello spazio del quadrante. Il baricentro
   si allunga fino al fondo del circolo, così il pannello chiude su una riga. */
.deriva-banda{display:grid;grid-template-columns:205px minmax(0,1fr) 1px minmax(0,1fr) 205px;gap:0 27px}
.pannello-deriva{grid-column:1/3;display:flex;flex-direction:column;gap:12px}
.deriva{display:grid;grid-template-columns:205px minmax(0,1fr) minmax(0,1fr);
        grid-template-rows:auto 1fr;gap:18px 27px}
.deriva .cella{display:flex;flex-direction:column;gap:8px}
.deriva .cerchio-quinte{grid-column:1;grid-row:1/3}
.deriva .baricentro{grid-column:2/4;grid-row:2}
.deriva .baricentro .et{display:flex;justify-content:space-between;gap:10px}
/* Il baricentro sta dentro la sua etichetta, e da lì ereditava la spaziatura larga
   e il corpo delle sigle: in una targhetta si vedeva — «+ 0 , 2», più piccolo delle
   altre e con un vuoto a destra. Qui torna come le altre letture. */
.deriva .baricentro .et .vl{font-size:8.5px;letter-spacing:0}
.letture-deriva{gap:9px}
.letture-deriva .lettura{justify-content:space-between}
.tela-quinte{position:relative;width:100%;height:190px}
/* La tonalità al centro del circolo è testo e non disegno: si legge, si
   traduce, e un lettore di schermo la trova. */
.centro-quinte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
               display:flex;flex-direction:column;align-items:center;gap:5px;
               pointer-events:none}
/* Il tasto che sceglie la tonalità si riprende il puntatore che il centro cede
   al canvas, e sta dove stava l'etichetta: sopra la nota, senza spostarla. */
.centro-quinte .cambia-tonalita{pointer-events:auto}
.tonalita{font-size:26px;font-weight:200;letter-spacing:.02em;line-height:1}
/* Le note in uso sono parole, quindi inchiostro: l'ambra è dei valori. */
.collezione{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
            color:var(--inchiostro);line-height:1.4}
.tela-baricentro{width:100%;flex:1;min-height:44px}
/* ---------------------------------------------------------------- le influenze
   Lo specchio della deriva: il pannello sulle due colonne di destra, le letture
   sotto il quadrante dei tessuti e il cerchio nella colonna da 205 dalla parte
   esterna. L'intestazione è giustificata a destra come quella dei tessuti, e la
   voce ha il margine negativo quanto la sua spaziatura per la stessa ragione.

   Le due righe di sopra non hanno la stessa altezza di quelle della deriva — la
   stagione ha un'etichetta e quattro letture, la deriva quattro letture sole —
   quindi le due non si allineano sulla riga del baricentro ma sul FONDO: il
   gruppo della deriva chiude sulla riga del cerchio, come il baricentro a fianco. */
.pannello-influenze{grid-column:4/6;display:flex;flex-direction:column;gap:12px}
.pannello-influenze .capo{justify-content:flex-end}
.pannello-influenze .capo .titolo{flex-direction:row-reverse}
.pannello-influenze .capo .voce{margin-right:-.30em}
.influenze{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 205px;
           grid-template-rows:auto 1fr;gap:18px 27px}
.influenze .cella{display:flex;flex-direction:column;gap:9px}
.influenze .lettura{justify-content:space-between}
.influenze .cerchio-influenze{grid-column:3;grid-row:1/3;gap:8px}
.influenze .cerchio-influenze .et{text-align:right}
.influenze .deriva-fonte{grid-column:1/3;grid-row:2;align-self:end}
.influenze .due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 27px}
.tela-influenze{position:relative;width:100%;height:190px}
.centro-influenze{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
                  display:flex;flex-direction:column;align-items:center;gap:4px;
                  pointer-events:none}
/* Due parole e non una sola grande come la tonalità: dentro l'anello dei mesi
   «pomeriggio» a ventisei pixel non ci starebbe. */
.nome-tempo{font-size:15px;font-weight:300;letter-spacing:.02em;line-height:1}

/* --------------------------------------------------------------------- il piede
   NELLO STRUMENTO IL PIEDE È SOLO ARIA: ventisei pixel, cioè quanto era alto —
   dodici di respiro sopra la riga e quattordici di testo — più i sedici di
   margine che aveva. Le regole qui sotto restano perché il piede della GUIDA le
   usa: lì porta il ritorno allo strumento e il codice su GitHub. */
.piede-vuoto{height:26px;margin-top:16px}

.piede{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
       margin-top:16px;padding-top:12px;border-top:1px solid var(--filo);
       font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
       color:var(--grigio);line-height:1.6}
.piede b{font-weight:400;color:var(--inchiostro)}

/* --------------------------------------------------------------------- la firma
   LA STESSA DEGLI ALTRI PROGETTI — Rada, Rada 2, Nuvole — con le stesse parole e
   la stessa forma: un filo, e sotto la frase e i recapiti, centrati. Il filo
   separa senza chiudere: un riquadro qui non conterrebbe nulla. I colori sono
   quelli di questa tavola — grigio le parole, filo la linea, ambra il fuoco — e
   il divisore è quello della testata. Il nome del sito e l'indirizzo non si
   traducono: sono identificatori, non parole. */
.firma{margin-top:26px;padding-top:16px;border-top:1px solid var(--filo);text-align:center}
.firma p{margin:0;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.1em;
         color:var(--grigio)}
.firma .recapiti{display:flex;align-items:center;justify-content:center;gap:14px;
                 flex-wrap:wrap;margin-top:9px}
.firma a,.firma .posta{font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.1em;
                       color:var(--grigio);text-decoration:none;padding-bottom:2px;
                       border-bottom:1px solid transparent}
.firma a{transition:color .2s,border-color .2s}
.firma a:hover{color:var(--inchiostro);border-bottom-color:var(--filo)}
.firma a:focus-visible{outline:1px solid var(--ambra);outline-offset:3px}
.firma .divisore{height:10px}
@media (max-width:479px){
  .firma .divisore{display:none}
  .firma .recapiti{gap:8px;flex-direction:column}
}

/* ------------------------------------------------------------- schermi stretti
   Le cinque colonne diventano due e poi una. I quadranti non rimpiccioliscono
   sotto una certa misura: quattro anelli in centoventi pixel non si leggono, e
   una tavola illeggibile è peggio di una tavola che scorre. */
@media (max-width:1180px){
  .classi{grid-template-columns:205px minmax(0,1fr);gap:26px 24px}
  .classi .colonna.sinistra{order:1}
  .classi .quadrante.gocce{order:2}
  .classi .filoV{display:none}
  .classi .colonna.destra{order:3}
  .classi .quadrante.tessuti{order:4}
  .banco{grid-template-columns:205px minmax(0,1fr);gap:22px 24px}
  .banco .mixer{grid-column:1/-1}
  .faders{max-width:420px}
  .comandi-paesaggio{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 26px}
  .riga-paesaggio{grid-template-columns:160px minmax(0,1fr) 120px;gap:0 20px}
  .deriva-banda{grid-template-columns:205px minmax(0,1fr);gap:30px 24px}
  .pannello-deriva,.pannello-influenze{grid-column:1/-1}
}
@media (max-width:720px){
  .foglio{padding:24px 20px 22px}
  .classi{grid-template-columns:minmax(0,1fr)}
  .classi .colonna.destra .intesta{flex-direction:row;justify-content:flex-start;text-align:left}
  .classi .colonna.destra .intesta .voce,.classi .colonna.destra .intesta .dida{margin-right:0}
  .banco{grid-template-columns:minmax(0,1fr)}
  .comandi-paesaggio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .riga-paesaggio{grid-template-columns:minmax(0,1fr);gap:18px}
  .modi-lettura{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .modi-lettura .et{grid-column:1/-1}
  .deriva-banda{grid-template-columns:minmax(0,1fr)}
  .deriva{grid-template-columns:minmax(0,1fr)}
  .deriva .cerchio-quinte,.deriva .baricentro{grid-column:auto;grid-row:auto}
  .influenze,.influenze .due{grid-template-columns:minmax(0,1fr)}
  .influenze .cerchio-influenze,.influenze .deriva-fonte{grid-column:auto;grid-row:auto}
  .influenze .cerchio-influenze{order:-1}
  .pannello-influenze .capo{justify-content:flex-start}
  .pannello-influenze .capo .titolo{flex-direction:row}
  .pannello-influenze .capo .voce{margin-right:0}
  .influenze .cerchio-influenze .et{text-align:left}
  .testata{gap:14px;padding-bottom:12px}
  .piede{flex-direction:column;gap:6px}
}

/* La spia di un pulsante a due stati: un quadrato che si riempie d'inchiostro.
   Sta dentro un `button` e non è una spunta, perché quello che si preme è
   un'azione — «Ascolta», «Ferma» — e non una casella da barrare. */
.spia{width:9px;height:9px;flex:none;border:1px solid var(--inchiostro);background:transparent}
/* Premuto, un pulsante d'azione fa quello che fa una lingua scelta: si riempie
   d'inchiostro e la spia si rovescia in carta. */
.chip[aria-pressed=true]{color:var(--carta);position:relative;z-index:0}
.chip[aria-pressed=true]::before{content:"";position:absolute;z-index:-1;
  inset:-5px calc(.16em - 7px) -5px -7px;background:var(--inchiostro);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.chip[aria-pressed=true] .spia{background:var(--carta);border-color:var(--carta)}
.chip .misura{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:var(--grigio);
              text-transform:none;margin-left:8px}
.chip:hover{color:var(--ambra)}
.chip:hover .spia{border-color:var(--ambra)}

/* ================================================================== la guida
   Un documento, non uno strumento: nessun canvas sotto, nessuna colonna. Una
   misura di lettura sola, larga quanto una riga si legge senza perdere il capo
   — sessantadue caratteri circa — e le tabelle dei parametri accanto.

   Riusa tutto quello che c'è: `.foglio`, `.testata`, `.banda`, `.capo`, `.et`,
   `.chip`, le lingue e i temi. Quello che segue è solo il testo corrente e le
   tabelle, che nello strumento non esistono. */
.guida .banda.doc{border-top:1px solid var(--filo);margin-top:26px;padding-top:14px}
.guida .banda.doc:first-of-type{border-top:0}
.guida .capo{margin-bottom:14px}
.guida .titolo{display:flex;align-items:baseline;gap:14px}
.guida .titolo .num{font-family:var(--mono);font-size:13px;font-weight:200;color:var(--ambra)}
.guida .titolo .voce{font-size:12px;font-weight:400;letter-spacing:.30em;
                     text-transform:uppercase}
.guida p{max-width:62ch;margin:0 0 11px;font-size:12.5px;line-height:1.62;
         color:var(--inchiostro-2)}
.guida p.apertura{max-width:76ch;font-size:14px;color:var(--inchiostro);margin-top:10px}
/* La firma non è un paragrafo del manuale: senza questa riga prenderebbe la misura
   di lettura, il corpo e il colore del testo corrente, e starebbe a sinistra. */
.guida .firma p{max-width:none;margin:0;font-size:10px;line-height:normal;color:var(--grigio)}
.guida .banda.doc > .et{display:block;margin:22px 0 7px}

/* Lo schema del segnale è in mono e a larghezza fissa: è un disegno fatto di
   caratteri, e va letto come una figura. Scorre da sé se la finestra è
   stretta, invece di andare a capo dove capita. */
.guida .catena{font-family:var(--mono);font-size:10px;line-height:1.7;
               color:var(--inchiostro-2);margin:4px 0 16px;overflow-x:auto;
               padding-bottom:6px}

/* Tre colonne: nome, corsa, funzione. Il nome in mono maiuscoletto come sui
   comandi, la corsa in cifre a larghezza fissa perché le si legge in colonna,
   la funzione in tondo. Nessun bordo verticale: bastano i fili orizzontali. */
.guida table.par{width:100%;max-width:820px;border-collapse:collapse;
                 margin:0 0 18px}
.guida table.par th{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;
                    text-transform:uppercase;color:var(--grigio);font-weight:400;
                    text-align:left;padding:0 14px 5px 0;
                    border-bottom:1px solid var(--filo)}
.guida table.par td{font-size:12px;line-height:1.5;color:var(--inchiostro-2);
                    padding:7px 14px 7px 0;border-bottom:1px solid var(--filo-2);
                    vertical-align:top}
.guida table.par td:first-child{font-family:var(--mono);font-size:8px;
                                letter-spacing:.16em;text-transform:uppercase;
                                color:var(--inchiostro);white-space:nowrap;width:1%}
.guida table.par td:nth-child(2){font-family:var(--mono);font-size:9px;
                                 font-variant-numeric:tabular-nums;
                                 color:var(--ambra);white-space:nowrap;width:1%}
/* Nelle tabelle a due colonne la seconda porta la descrizione e non una corsa:
   torna tonda e larga. */
.guida table.par td[colspan]{font-family:var(--sans);font-size:12px;
                             letter-spacing:0;text-transform:none;
                             color:var(--inchiostro-2);white-space:normal;width:auto}
.guida table.mood td:nth-child(3){font-family:var(--mono);font-size:9px;
                                  font-variant-numeric:tabular-nums;
                                  color:var(--ambra);white-space:nowrap}

.guida .piede{margin-top:30px}
.guida .piede a{color:var(--grigio);text-decoration:none}
.guida .piede a:hover{color:var(--ambra)}
.guida .piede .collegamenti{display:inline-flex;align-items:center;gap:14px}
.guida a.chip{text-decoration:none}

@media (max-width:720px){
  .guida table.par td:first-child,
  .guida table.par td:nth-child(2){white-space:normal}
}

/* Il titolo di sezione in una colonna sua, larga come le colonne dei comandi
   nello strumento: la stessa griglia, così le due pagine si riconoscono. Il
   corpo va tutto nella seconda colonna, e non serve toccarlo elemento per
   elemento — basta dire dove sta il capo. */
@media (min-width:900px){
  .guida .banda.doc{display:grid;grid-template-columns:205px minmax(0,1fr);gap:0 27px}
  .guida .banda.doc > *{grid-column:2}
  .guida .banda.doc > .capo{grid-column:1;grid-row:1;margin-bottom:0}
  .guida .titolo{flex-direction:column;gap:4px}
}

/* Le tabelle si allineano fra loro e non ciascuna per conto suo: in un manuale
   le colonne devono stare incolonnate anche fra un blocco e il successivo, o
   l'occhio che scorre le corse deve ritrovare il margine ogni volta. */
.guida table.par{table-layout:fixed}
.guida table.par td:first-child,
.guida table.par th:first-child{width:132px}
.guida table.par td:nth-child(2),
.guida table.par th:nth-child(2){width:112px}
.guida table.mood td:nth-child(2),
.guida table.mood th:nth-child(2){width:132px}

/* Le tabelle a due colonne — nome e sintesi — non hanno una corsa da
   incolonnare: il nome resta stretto e la descrizione prende tutto il resto. */
.guida table.par.nomi td:nth-child(2),
.guida table.par.nomi th:nth-child(2){width:auto;font-family:var(--sans);
                                      font-size:12px;letter-spacing:0;
                                      text-transform:none;color:var(--inchiostro-2);
                                      white-space:normal}
.guida table.par.nomi th:nth-child(2){font-family:var(--mono);font-size:7.5px;
                                      letter-spacing:.16em;text-transform:uppercase;
                                      color:var(--grigio)}