*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: var(--passo-3);
  scroll-padding-block-end: calc(var(--dock-h) + var(--passo-4));
  scrollbar-width: thin;
  scrollbar-color: var(--linea-forte) transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body,
h1, h2, h3, h4,
p, figure, blockquote,
dl, dd, ol, ul { margin: 0; }

ol[class],
ul[class] {
  list-style: none;
  padding: 0;
}

img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 3px;
}

::selection {
  background-color: var(--viola);
  color: var(--testo);
}

[hidden][hidden] { display: none; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--grad-pagina);
  color: var(--testo-medio);
  font-family: var(--font-testo);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--dock-h) + var(--passo-4) + env(safe-area-inset-bottom, 0px));
}

section[id] { scroll-margin-block-start: var(--passo-3); }

@media (min-width: 1100px) {
  body { padding-bottom: 0; }

  main { padding-left: var(--binario-w); }
  .piede { padding-left: calc(var(--binario-w) + var(--margine)); }
}

h1, h2, h3 {
  font-family: var(--font-titolo);
  font-weight: 700;
  color: var(--testo);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

p { text-wrap: pretty; }

p, li, dd, dt, blockquote, figcaption { overflow-wrap: break-word; }

strong, b {
  font-weight: 600;
  color: var(--testo);
}

em, i { font-style: italic; }

small { font-size: var(--t-piccolo); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-variant-ligatures: none;
}

code {
  padding: 0.15em 0.45em;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-s);
  background-color: var(--pannello);
  color: var(--testo);
}

time, output {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

a:not([class]) {
  color: var(--viola-chiaro);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--durata) var(--curva);
}

a:not([class]):hover { color: var(--ciano); }

.salta {
  position: fixed;
  z-index: var(--z-salta);
  top: var(--passo-2);
  left: var(--passo-2);
  padding: var(--passo) var(--passo-2);
  border: 1px solid var(--linea-viva);
  border-radius: var(--raggio-s);
  background-color: var(--fondo-2);
  box-shadow: var(--ombra);
  color: var(--testo);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
  transform: translateY(calc(-100% - var(--passo-6)));
  transition: transform var(--durata) var(--curva);
}

.salta:focus { transform: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--passo);
  min-height: 44px;
  padding-inline: var(--passo-3);
  border: 1px solid transparent;
  border-radius: var(--raggio-pill);
  font-family: var(--font-mono);
  font-size: var(--t-piccolo);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--durata) var(--curva),
    border-color     var(--durata) var(--curva),
    color            var(--durata) var(--curva),
    box-shadow       var(--durata) var(--curva),
    translate        var(--durata-lampo) var(--curva);
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.btn:hover { translate: 0 -1px; }
.btn:active { translate: 0 1px; }

.btn--pieno {
  background-image: linear-gradient(118deg, var(--viola-cupo) 0%, var(--viola) 100%);
  border-color: var(--linea-viva);
  color: var(--testo);
}

.btn--pieno:hover { box-shadow: var(--bagliore-viola); }

.btn--vuoto {
  background-color: transparent;
  border-color: var(--linea-comando);
  color: var(--testo);
}

.btn--vuoto:hover {
  border-color: var(--ciano);
  background-color: var(--pannello-2);
  color: var(--testo);
}

.btn.is-fatto {
  border-color: var(--ok);
  color: var(--ok);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--passo) * 0.75);
  padding: 6px var(--passo-2);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-pill);
  background-color: var(--pannello);
  color: var(--testo-medio);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.spia {
  --spia-d: 10px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--spia-d);
  height: var(--spia-d);
  border-radius: 50%;
  background-color: currentColor;
  color: var(--testo-tenue);
  box-shadow: 0 0 calc(var(--spia-d) * 0.9) currentColor;
  transition: color var(--durata) var(--curva), box-shadow var(--durata) var(--curva);
}

.spia::after {
  content: "";
  position: absolute;
  inset: calc(var(--spia-d) * -0.55);
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.2;
}

.spia.is-live { color: var(--live); }
.spia.is-live::after { animation: spia-pulsa 2.2s var(--curva) infinite; }

.spia.is-offline {
  color: var(--testo-tenue);
  box-shadow: none;
}
.spia.is-offline::after { opacity: 0.1; }

.spia.is-verifica { color: var(--allerta); }
.spia.is-verifica::after { animation: spia-respira 1.8s ease-in-out infinite; }

@keyframes spia-pulsa {
  0%        { opacity: 0.34; transform: scale(0.65); }
  70%, 100% { opacity: 0;    transform: scale(1.55); }
}

@keyframes spia-respira {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.32; }
}

.sezione__testa {
  display: flex;
  flex-direction: column;
  gap: var(--passo-2);
  max-width: 62ch;
  margin-bottom: var(--passo-6);
}

.sezione__occhiello {
  display: flex;
  align-items: center;
  gap: var(--passo);
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

.sezione__occhiello::before {
  content: "";
  flex: none;
  width: var(--passo-3);
  height: 1px;
  background-color: var(--ciano);
}

.sezione__titolo { font-size: var(--t-h2); }

.sezione__testo {
  max-width: 58ch;
  color: var(--testo-medio);
}

.binario {
  position: fixed;
  z-index: var(--z-binario);
  display: flex;
}

.binario__marchio {
  -webkit-touch-callout: none;
  display: flex;
  align-items: center;
  flex: none;
}

.binario__avatar {
  border-radius: 50%;
  border: 1px solid var(--linea-forte);
  object-fit: cover;
}

.binario__voce {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--testo-tenue);
  transition: color var(--durata) var(--curva), background-color var(--durata) var(--curva);
}

.binario__voce:hover { color: var(--testo); }

.binario__punto {
  flex: none;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: transparent;
  transition:
    background-color var(--durata) var(--curva),
    border-color     var(--durata) var(--curva),
    box-shadow       var(--durata) var(--curva);
}

.binario__voce.is-attiva { color: var(--testo); }

.binario__voce.is-attiva .binario__punto {
  background-color: var(--ciano);
  border-color: var(--ciano);
  box-shadow: var(--bagliore-ciano);
}

.binario__testo {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.binario__stato { display: flex; align-items: center; }

.binario__stato-testo {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--testo-tenue);
}

@media (max-width: 1099.98px) {
  .binario {
    bottom: calc(var(--passo-2) + env(safe-area-inset-bottom, 0px));
    inset-inline: 0;
    margin-inline: auto;
    width: fit-content;
    max-width: calc(100% - var(--passo-2));
    height: var(--dock-h);
    align-items: center;
    gap: var(--passo);
    padding-inline: var(--passo);
    border: 1px solid var(--linea-comando);
    border-radius: var(--raggio-pill);
    box-shadow: var(--ombra);
    background-color: var(--fondo-2);
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .binario {
      background-color: var(--pannello-2);
      -webkit-backdrop-filter: blur(var(--sfocatura)) saturate(140%);
      backdrop-filter: blur(var(--sfocatura)) saturate(140%);
    }
  }

  .binario__marchio { order: 1; }
  .binario__stato   { order: 2; }
  .binario__nav     { order: 3; }

  .binario__marchio { gap: var(--passo); }

  .binario__avatar {
    width: 34px;
    height: 34px;
  }

  .binario__nome { display: none; }

  .binario__stato {
    --spia-d: 8px;
    flex: none;
    padding-right: var(--passo);
    border-right: 1px solid var(--linea);
  }

  .binario__stato-testo { display: none; }

  .binario__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .binario__voce {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    padding: 5px 1px;
    border-radius: var(--raggio-s);
  }

  .binario__punto {
    width: 7px;
    height: 7px;
  }

  .binario__testo {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(8px, 2.3vw, 10px);
    letter-spacing: 0.01em;
  }

  .binario__social { display: none; }
}

@media (max-width: 399.98px) {
  .binario {
    gap: 6px;
    padding-inline: 6px;
  }

  .binario__stato { padding-right: 6px; }
  .binario__nav { gap: 0; }
  .binario__voce { padding-inline: 0; }
  .binario__testo { letter-spacing: 0; }
}

@media (max-width: 379.98px) {
  .binario__avatar {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 1100px) {
  .binario {
    inset-block: 0;
    left: 0;
    width: var(--binario-w);
    flex-direction: column;
    align-items: center;
    gap: var(--passo-2);
    padding-block: var(--passo-3);
    border-right: 1px solid var(--linea);
    background-color: transparent;
  }

  .binario__marchio {
    flex-direction: column;
    gap: var(--passo-2);
  }

  .binario__avatar {
    width: 40px;
    height: 40px;
  }

  .binario__nome {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--testo-tenue);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--spazio-etichetta);
    white-space: nowrap;
    transition: color var(--durata) var(--curva);
  }

  .binario__marchio:hover .binario__nome { color: var(--testo); }

  .binario__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--passo-2);
    margin-block: auto;
  }

  .binario__voce {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .binario__punto {
    width: 9px;
    height: 9px;
  }

  .binario__testo {
    position: absolute;
    left: calc(100% + var(--passo));
    top: 50%;
    padding: 7px var(--passo-2);
    border: 1px solid var(--linea);
    border-radius: var(--raggio-pill);
    background-color: var(--fondo-2);
    box-shadow: var(--ombra-morbida);
    color: var(--testo);
    font-size: var(--t-micro);
    letter-spacing: var(--spazio-etichetta);
    opacity: 0;
    pointer-events: none;
    transform: translate(calc(var(--passo) * -1), -50%);
    transition: opacity var(--durata) var(--curva), transform var(--durata) var(--curva);
  }

  .binario__voce:hover .binario__testo,
  .binario__voce:focus-visible .binario__testo,
  .binario__voce.is-attiva .binario__testo {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .binario__stato {
    flex-direction: column;
    gap: var(--passo);
    padding-bottom: var(--passo);
  }

  .binario__stato-testo {
    max-width: var(--binario-w);
    padding-inline: 6px;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .binario__social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .binario__social-voce {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--testo-tenue);
    transition: color var(--durata) var(--curva), background-color var(--durata) var(--curva);
  }

  .binario__social-voce:hover {
    color: var(--ciano);
    background-color: var(--pannello-2);
  }

  .binario__social-voce svg {
    width: 19px;
    height: 19px;
  }
}

@media (min-width: 1100px) and (max-height: 720px) {
  .binario__nome { display: none; }
  .binario__nav { gap: var(--passo); }
}

@media (min-width: 1100px) and (max-height: 640px) {
  .binario__social { display: none; }

  .binario__voce {
    width: 40px;
    height: 40px;
  }
}

.piede {
  display: grid;
  grid-template-columns: min(100%, var(--max-larghezza));
  justify-content: center;
  margin-top: var(--passo-8);
  padding-block: var(--passo-6);
  padding-inline: var(--margine);
  border-top: 1px solid var(--linea);
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
}

.piede > * + * { margin-top: var(--passo); }

.piede__copy { color: var(--testo-medio); }

.piede > .piede__autore {
  margin-top: calc(var(--passo-3) * 4);
  font-size: 9px;
  line-height: 1.2;
  color: var(--testo-medio);
  opacity: 0.45;
}

.piede__autore a { color: inherit; text-decoration: none; }

.piede__nota {
  margin-top: var(--passo);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --durata-lampo: 1ms;
    --durata: 1ms;
    --durata-lunga: 1ms;
  }

  .spia::after,
  .spia.is-live::after,
  .spia.is-verifica::after { animation: none; }

  .btn:hover,
  .btn:active { translate: none; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
  }
}