:root {
  color-scheme: light dark;
  --sfondo: #fbfbfa; --pannello: #fff; --testo: #1a1a19; --tenue: #6f6f6a;
  --bordo: #dcdcd6; --accento: #2b6cb0; --verde: #157f3d; --errore: #b02b2b;
  --raggio: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #191918; --pannello: #212120; --testo: #eceae4; --tenue: #9a978f;
    --bordo: #35342f; --accento: #79a9dd; --verde: #5fbb85; --errore: #e08585;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--sfondo); color: var(--testo);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.foglio { max-width: 1000px; margin: 0 auto; padding: 2.2rem 1.5rem 4rem; }
header { margin-bottom: 1.6rem; }
h1 { font-size: 1.05rem; font-weight: 600; margin: 0; }
header p { margin: .25rem 0 0; color: var(--tenue); font-size: 13px; max-width: 60ch; }

.zona {
  border: 1.5px dashed var(--bordo); border-radius: var(--raggio);
  background: var(--pannello); padding: 2.6rem 1.5rem; text-align: center;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.zona:hover { border-color: var(--tenue); }
.zona.sopra { border-color: var(--accento); border-style: solid;
  background: color-mix(in srgb, var(--accento) 7%, var(--pannello)); }
.zona.occupata { pointer-events: none; opacity: .5; }
.zona strong { display: block; font-weight: 550; margin-bottom: .25rem; }
.zona span { color: var(--tenue); font-size: 13px; }

.impostazioni {
  margin-top: .9rem; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--pannello); font-size: 13px;
}
.impostazioni .riga {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .7rem 1rem;
}
.impostazioni .riga + .riga { border-top: 1px solid var(--bordo); }
.etichetta { color: var(--tenue); min-width: 5em; }
.scelta { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.scelta input { accent-color: var(--accento); }
.nota { color: var(--tenue); font-size: 12px; }

button, select {
  padding: .4rem .8rem; border: 1px solid var(--bordo); border-radius: 6px;
  background: var(--pannello); color: var(--testo); font: inherit; font-size: 13px;
  cursor: pointer;
}
button:hover:not(:disabled), select:hover { border-color: var(--tenue); }
button:disabled { opacity: .45; cursor: default; }
button.primario { background: var(--accento); border-color: var(--accento); color: #fff; }
@media (prefers-color-scheme: dark) { button.primario { color: #10233a; } }

.interruttore { display: flex; }
.interruttore button {
  border-radius: 0; margin-left: -1px; padding: .3rem .7rem; line-height: 1.25;
}
.interruttore button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.interruttore button:last-child { border-radius: 0 6px 6px 0; }
.interruttore button.attivo { background: var(--accento); border-color: var(--accento);
  color: #fff; position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  .interruttore button.attivo { color: #10233a; }
}

.stato { margin-top: 1rem; font-size: 13px; color: var(--tenue); min-height: 1.4em; }
.stato.errore { color: var(--errore); }
.barra { height: 4px; border-radius: 2px; background: var(--bordo); overflow: hidden; margin-top: .4rem; }
#barra-piena { height: 100%; width: 30%; background: var(--accento);
  animation: scorre 1.1s ease-in-out infinite; }
@keyframes scorre { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

.risultato { margin-top: 1.4rem; }
.risultato[hidden] { display: none; }

.numeri {
  width: 100%; border-collapse: collapse; background: var(--pannello);
  border: 1px solid var(--bordo); border-radius: var(--raggio) var(--raggio) 0 0;
  font-size: 13px; overflow: hidden;
}
.numeri th, .numeri td { padding: .5rem .8rem; text-align: right;
  font-variant-numeric: tabular-nums; }
.numeri th:first-child, .numeri td:first-child { text-align: left; }
.numeri thead th { font-weight: 550; color: var(--tenue); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--bordo); }
.numeri tbody tr + tr td { border-top: 1px solid var(--bordo); }
.numeri .meglio { color: var(--verde); font-weight: 600; }
.numeri td.motore { font-weight: 550; }

.comandi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  padding: .6rem 1rem; border: 1px solid var(--bordo); border-top: 0;
  background: var(--pannello); font-size: 13px;
}
.cursore { display: flex; align-items: center; gap: .5rem; color: var(--tenue); }
.cursore input[type=range] { width: 110px; accent-color: var(--accento); }
.cursore output { min-width: 3.4em; font: 12px ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums; color: var(--testo); }

.confronto {
  display: flex; gap: 10px; align-items: stretch;
  border: 1px solid var(--bordo); border-top: 0;
  border-radius: 0 0 var(--raggio) var(--raggio);
  background: var(--pannello); padding: 10px;
}
/* L'immagine intera si vede sempre: il disegno sta dentro il riquadro,
   adattato in altezza oltre che in larghezza. */
.visore {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--bordo); border-radius: 6px;
  height: min(64vh, 620px); overflow: hidden; cursor: crosshair;
}
.palco { position: relative; }
.spazio { width: 100%; }
.strato { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#s-originale, #s-differenze { image-rendering: pixelated; }

.mirino {
  position: absolute; border: 1px solid var(--accento);
  background: color-mix(in srgb, var(--accento) 12%, transparent);
  pointer-events: none; box-shadow: 0 0 0 1px #fff inset;
}

.pannello-lente { flex: 0 0 300px; display: flex; flex-direction: column; gap: .4rem; }
#lente {
  width: 300px; height: 300px; border: 1px solid var(--bordo); border-radius: 6px;
  background: #fff; display: block;
}
.pannello-lente .nota { margin: 0; font-family: ui-monospace, Menlo, monospace; }

@media (max-width: 760px) {
  .confronto { flex-direction: column; }
  .pannello-lente { flex: 0 0 auto; }
  #lente { width: 100%; height: auto; aspect-ratio: 1; }
}

.suggerimento { margin: .5rem 0 0; font-size: 12px; color: var(--tenue); }
.suggerimento kbd { font: 11px ui-monospace, Menlo, monospace;
  border: 1px solid var(--bordo); border-radius: 4px; padding: .15em .4em;
  background: var(--pannello); }

.azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; }
.azioni .nome { margin-left: auto; color: var(--tenue);
  font: 12px ui-monospace, Menlo, monospace; }

.legenda { margin: .5rem 0 0; font-size: 12px; color: var(--tenue); line-height: 1.5; }
.legenda b { font-weight: 600; }

/* L'interruttore fra i due motori, e il cursore dello spessore unico. */
#riga-motore { gap: .45rem; }

#gruppo-vettore { position: absolute; inset: 0; }
#s-a, #s-b { image-rendering: auto; }

#riga-spessore { gap: .4rem; }
#riga-spessore input[type=range] { width: 130px; }
#riga-spessore output { min-width: 4.2em; font-variant-numeric: tabular-nums; }