/* Il colore serve solo allo stato: tutto il resto e' inchiostro su carta, cosi' un guasto si vede subito. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --page: 1320px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --r-s: 9px; --r-m: 12px; --r-l: 20px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);

  --bg: #f3f3f0; --surface: #ffffff; --surface-2: #f0f0ec; --surface-3: #e4e4de;
  --text: #121316; --muted: #5b5f67; --border: #e2e2dc; --border-strong: #c6c6bf;
  --ink: #121316; --ink-text: #ffffff;
  --ok: #0a7a4a; --ok-bg: #dff5e9; --warn: #8a5900; --warn-bg: #fbefd6; --bad: #bf2b21; --bad-bg: #fce6e3;
  --dot: rgba(18, 19, 22, .2); --glow: rgba(18, 19, 22, .055);
  --shadow: 0 1px 2px rgba(18, 19, 22, .05), 0 10px 28px rgba(18, 19, 22, .07);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c0e; --surface: #141518; --surface-2: #1c1e22; --surface-3: #2a2d33;
    --text: #f2f3f5; --muted: #9ea4ae; --border: #25272c; --border-strong: #3d4047;
    --ink: #f2f3f5; --ink-text: #0b0c0e;
    --ok: #46d995; --ok-bg: #10291e; --warn: #f2b63c; --warn-bg: #2e2410; --bad: #ff7367; --bad-bg: #331613;
    --dot: rgba(242, 243, 245, .2); --glow: rgba(242, 243, 245, .075);
    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 14px 34px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--ink); color: var(--ink-text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .2em; transition: text-decoration-color .15s; }
a:hover { text-decoration-color: currentColor; }
h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 1.1rem; text-wrap: balance; }
h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.012em; margin: 0 0 .7rem; }
main > h2 { margin-top: 2rem; }
p { margin: 0 0 .8rem; }
ul { padding-left: 1.2rem; }

/* Barra di navigazione flottante */
header.top { position: sticky; top: .75rem; z-index: 20; view-transition-name: top; display: flex; align-items: center; gap: .6rem; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page) - 2 * var(--gutter)); margin: .75rem auto 0; padding: .4rem .45rem .4rem .85rem; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
header.top .brand { display: inline-flex; align-items: center; gap: .5rem; flex: none; font-weight: 620; letter-spacing: -.015em; margin-right: .5rem; text-decoration: none; }
.mark { width: 17px; height: 17px; flex: none; }
header.top nav { display: flex; gap: .15rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
header.top nav::-webkit-scrollbar { display: none; }
header.top nav a { flex: none; padding: .36rem .72rem; border-radius: 10px; color: var(--muted); font-size: .9rem; text-decoration: none; transition: background-color .15s, color .15s; }
header.top nav a:hover { background: var(--surface-2); color: var(--text); }
header.top nav a.on { background: var(--ink); color: var(--ink-text); }
header.top form { margin: 0; flex: none; }

main { width: 100%; max-width: var(--page); margin: 0 auto; padding: 1.9rem var(--gutter) 2.5rem; flex: 1; }
main.narrow { max-width: 460px; padding-top: clamp(2.5rem, 11vh, 6.5rem); }

/* Footer: poco testo e una parola enorme che sfuma */
footer.site { width: 100%; max-width: var(--page); margin: 1rem auto 0; padding: 0 var(--gutter); overflow: hidden; color: var(--muted); font-size: .82rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; padding: .95rem 0 1.3rem; border-top: 1px solid var(--border); }
.foot-word { font-weight: 650; font-size: min(15vw, 11.2rem); letter-spacing: -.065em; line-height: .8; white-space: nowrap; margin-left: -.05em; padding-bottom: .02em; color: transparent; background: linear-gradient(180deg, var(--border-strong) 5%, transparent 88%); -webkit-background-clip: text; background-clip: text; -webkit-user-select: none; user-select: none; }
main.narrow + footer.site .foot-word { display: none; }

/* Griglia bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; grid-auto-flow: dense; margin-bottom: 1.1rem; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.bento-side { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; min-width: 0; }
.side-wide { grid-column: span 4; } .side-narrow { grid-column: span 2; } .side-half { grid-column: span 3; }
.column { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.column > .card { margin: 0; }

.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: 1.05rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); overflow: hidden; transition: border-color .2s, translate .45s var(--spring); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--glow), transparent 72%); transition: opacity .25s; }
.tile:hover { border-color: var(--border-strong); }
.tile:hover::before { opacity: 1; }
a.tile { text-decoration: none; }
a.tile:hover { translate: 0 -2px; }
.tile .label { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .84rem; }
.tile .value { font-size: clamp(1.75rem, 2.9vw, 2.3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; font-variant-numeric: tabular-nums; }
.tile .value.hero { font-size: clamp(3.8rem, 8.5vw, 6.8rem); letter-spacing: -.055em; line-height: .95; margin-top: .1rem; }
.tile .value.hero + .sub { margin-top: 0; padding-top: 0; font-size: .9rem; }
.tile .value .of { font-size: .42em; font-weight: 500; letter-spacing: -.02em; color: var(--muted); margin-left: .18em; }
.tile .sub { margin-top: auto; padding-top: .3rem; color: var(--muted); font-size: .82rem; }
.tile .arrow { transition: translate .4s var(--spring); }
a.tile:hover .arrow { translate: .2em 0; }

/* Una spia per porta: la flotta si legge a colpo d'occhio */
.leds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 1.1rem; }
.led { width: 15px; height: 24px; border-radius: 5px; background: var(--surface-3); transition: scale .35s var(--spring); }
.led:hover { scale: 1.18; }
.led.ok { background: var(--ok); } .led.warn { background: var(--warn); } .led.bad { background: var(--bad); }

/* Schede dei modem */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin: 1.5rem 0 .75rem; }
.section-head h2 { margin: 0; font-size: 1.15rem; }
.modems { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .75rem; }
.modem { gap: .75rem; }
.modem-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.modem-head > div { min-width: 0; }
.port { display: block; font-family: var(--mono); font-size: 1.4rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; text-decoration: none; }
.modem-name { display: block; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.exit { padding: .55rem .7rem; background: var(--surface-2); border-radius: var(--r-m); font-family: var(--mono); font-size: 1rem; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; overflow-wrap: anywhere; }
.exit small { flex: none; color: var(--muted); font-family: var(--sans); font-size: .76rem; letter-spacing: 0; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .32rem 1rem; margin: 0; font-size: .875rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.modem-error { color: var(--bad); font-size: .82rem; }
/* Colonne fisse: la scritta "Copiato" e' piu' corta e non deve far saltare i pulsanti. */
.modem-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: auto; padding-top: .15rem; }
.modem-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.modem-copy .wide { grid-column: span 2; }
.modem-foot { display: flex; gap: .4rem; }
.modem-foot form { margin: 0; flex: 1; }
.modem-foot button { width: 100%; }
.empty { padding: 2.4rem 1.2rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-l); color: var(--muted); }

.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; margin-right: .4em; vertical-align: -1px; }
.signal i { width: 3px; border-radius: 1px; background: var(--surface-3); }
.signal i:nth-child(1) { height: 4px; } .signal i:nth-child(2) { height: 7px; } .signal i:nth-child(3) { height: 10px; } .signal i:nth-child(4) { height: 13px; }
.signal.l1 i:nth-child(-n+1), .signal.l2 i:nth-child(-n+2), .signal.l3 i:nth-child(-n+3), .signal.l4 i { background: var(--text); }

meter { display: block; width: 100%; height: 5px; margin-top: .3rem; border: 0; border-radius: 99px; background: var(--surface-3); -webkit-appearance: none; appearance: none; }
meter::-webkit-meter-bar { height: 5px; border: 0; border-radius: 99px; background: var(--surface-3); }
meter::-webkit-meter-optimum-value { border-radius: 99px; background: var(--text); }
meter::-webkit-meter-suboptimum-value { border-radius: 99px; background: var(--warn); }
meter::-webkit-meter-even-less-good-value { border-radius: 99px; background: var(--bad); }
meter::-moz-meter-bar { border-radius: 99px; background: var(--text); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--bad); }

/* Grafico dello storico: barre sottili in inchiostro, il colore compare solo se la SIM va male */
.history-plot { position: relative; }
.history-chart { display: block; width: 100%; height: 130px; }
.history-chart .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.history-chart .bar { fill: var(--text); transition: opacity .15s; }
.history-chart .bar.warn { fill: var(--warn); }
.history-chart .bar.bad { fill: var(--bad); }
.history-chart .hit { fill: transparent; }
.history-chart .col:hover .bar { opacity: .7; }
.history-y { position: absolute; left: 0; color: var(--muted); font-size: .72rem; line-height: 1; padding: .15rem .3rem .15rem 0; background: var(--surface); pointer-events: none; }
.history-y.top { top: 2px; } .history-y.mid { top: calc(50% + 2px); }
.history-x { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; color: var(--muted); font-size: .76rem; }
.history-table { margin-top: .6rem; font-size: .88rem; }
.history-table summary { cursor: pointer; color: var(--muted); }
.history-table .table-wrap { margin-top: .6rem; }

/* Stati: forma, testo e colore, mai il colore da solo */
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .14rem .55rem; border-radius: 99px; font-size: .76rem; font-weight: 520; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.ok::before, .badge.warn::before, .badge.bad::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; }
.badge.ok::before { border-radius: 50%; }
.badge.warn::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.badge.bad::before { width: 6px; height: 6px; rotate: 45deg; border-radius: 1px; }
.badge.live::before { animation: pulse 2.4s ease-out infinite; }
.live-note { display: inline-flex; align-items: center; gap: .45em; color: var(--muted); font-size: .82rem; }
.live-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 2.4s ease-out infinite; }
.shimmer { color: transparent; background: linear-gradient(100deg, var(--muted) 30%, var(--text) 50%, var(--muted) 70%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 1.5s linear infinite; }

.flash { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem 1rem; border-radius: var(--r-m); margin-bottom: .75rem; font-weight: 500; overflow-wrap: anywhere; }
.flash::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .42em; background: currentColor; }
.flash.ok { background: var(--ok-bg); color: var(--ok); } .flash.ok::before { border-radius: 50%; }
.flash.err { background: var(--bad-bg); color: var(--bad); } .flash.err::before { rotate: 45deg; border-radius: 1px; }
.flash.warn { background: var(--warn-bg); color: var(--warn); } .flash.warn::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.flash > div { min-width: 0; }

/* Schede, griglie e tabelle */
.card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: 1.15rem 1.25rem; margin-bottom: .75rem; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: .75rem; }
.grid > .card { margin-bottom: 0; }
.stack { margin-bottom: .75rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: .78rem; white-space: nowrap; }
th, td { padding: .62rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }

/* Moduli */
label { display: block; font-size: .84rem; color: var(--muted); margin: .7rem 0 .25rem; }
/* Larga quanto il testo: un clic nello spazio vuoto accanto non deve cambiare la spunta. */
label.check { display: inline-flex; gap: .55rem; align-items: flex-start; color: var(--text); }
input, select, textarea { width: 100%; padding: .55rem .7rem; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); transition: border-color .15s, background-color .15s; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { background: var(--surface); border-color: var(--text); outline: 0; }
input[type=checkbox] { width: auto; margin-top: .25rem; accent-color: var(--ink); }
input.otp { font-family: var(--mono); font-size: 1.15rem; letter-spacing: .28em; }
textarea { min-height: 5.5rem; resize: vertical; }

/* Pulsanti: pressione a molla */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 2.35rem; padding: .4rem .95rem; font: inherit; font-size: .9rem; font-weight: 540; letter-spacing: -.005em; white-space: nowrap; text-decoration: none; color: var(--ink-text); background: var(--ink); border: 1px solid var(--ink); border-radius: 11px; cursor: pointer; transition: transform .4s var(--spring), background-color .15s, border-color .15s, color .15s; }
button:hover, .button:hover { transform: translateY(-1px); }
button:active, .button:active { transform: scale(.96); transition-duration: .08s; }
button.quiet, .button.quiet { background: transparent; color: var(--text); border-color: var(--border-strong); }
button.quiet:hover, .button.quiet:hover { background: var(--surface-2); }
button.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
button.danger:hover { background: var(--bad-bg); }
button.small, .button.small { min-height: 1.85rem; padding: .2rem .65rem; font-size: .8rem; border-radius: var(--r-s); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cta::after { content: "→"; transition: translate .4s var(--spring); }
.cta:hover::after { translate: .22em 0; }
button.copied { color: var(--ok); border-color: var(--ok); animation: pop .45s var(--spring); }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.actions form { margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.row > div { flex: 1 1 150px; }
.row label { margin-top: 0; }
.spaced { margin-top: .9rem; }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .36rem 1.1rem; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

.copy { display: flex; gap: .4rem; align-items: center; background: var(--surface-2); border-radius: var(--r-s); padding: .32rem .32rem .32rem .65rem; margin-bottom: .4rem; }
.copy code { flex: 1; min-width: 0; font-family: var(--mono); font-size: .82rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cred-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .6rem; }
.cred label { margin-top: .4rem; }
.cred-grid > div:nth-child(-n+2) label { margin-top: 0; }
.cred-note { margin: .5rem 0 0; }

.alerts-card { max-width: 640px; }
.steps { margin: 0 0 .4rem; padding-left: 1.2rem; }
.price { font-size: 2rem; font-weight: 600; letter-spacing: -.035em; margin-bottom: .2rem; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .7rem 1rem; margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; }
.page-head h2 { margin: 0; }
.page-title { min-width: 0; }
.page-title p { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }
.kicker { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .84rem; }

/* Accesso: mezzetinte che derivano lente dietro al modulo */
body:not(:has(header.top)):has(main.narrow)::before { content: ""; position: fixed; inset: -32px; z-index: -1; background: radial-gradient(var(--dot) 1.15px, transparent 1.5px) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 30%, #000 12%, transparent 74%); mask-image: radial-gradient(ellipse 62% 56% at 50% 30%, #000 12%, transparent 74%); animation: drift 70s linear infinite; }
.auth-mark { display: block; width: 30px; height: 30px; margin-bottom: 1.1rem; }
main.narrow .card { box-shadow: var(--shadow); }

/* Pagina di errore: il numero e' fatto di punti e il modem cerca rete */
.lost { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 58dvh; }
.lost-code { font-weight: 700; font-size: clamp(7.5rem, 31vw, 21rem); letter-spacing: -.07em; line-height: .84; margin-left: -.05em; color: transparent; background: radial-gradient(circle, var(--text) 40%, transparent 43%) 0 0 / 7px 7px; -webkit-background-clip: text; background-clip: text; -webkit-user-select: none; user-select: none; }
.lost h1 { margin: 1.4rem 0 .4rem; }
.lost p { color: var(--muted); max-width: 46ch; margin-bottom: 1.2rem; }
.signal.searching { height: 17px; margin: 0; }
.signal.searching i { width: 4px; background: var(--text); animation: search 1.7s var(--ease-out) infinite; }
.signal.searching i:nth-child(1) { height: 5px; } .signal.searching i:nth-child(2) { height: 9px; animation-delay: .14s; }
.signal.searching i:nth-child(3) { height: 13px; animation-delay: .28s; } .signal.searching i:nth-child(4) { height: 17px; animation-delay: .42s; }
.lost-status { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .84rem; }

@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes reveal { from { opacity: .15; transform: translateY(18px); } }
@keyframes nav-solid { to { background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: var(--shadow); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes pop { 0% { scale: .92; } }
@keyframes drift { to { background-position: 160px 160px; } }
@keyframes search { 0%, 100% { opacity: .18; } 35% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Solo al primo caricamento: la flotta si aggiorna ogni 10 secondi e non deve rianimarsi ogni volta. */
  .first .page-head, .first main > h1 { animation: rise .55s var(--ease-out) both; }
  .first .bento > .tile, .first .bento > .card, .first .bento-side > .tile, .first .column > .card { animation: rise .7s var(--ease-out) both; }
  .first .bento-side > :nth-child(1), .first .column:nth-child(2) > :nth-child(1) { animation-delay: .06s; }
  .first .bento-side > :nth-child(2), .first .column:nth-child(1) > :nth-child(2) { animation-delay: .12s; }
  .first .bento-side > :nth-child(3) { animation-delay: .18s; }
  .first .bento-side > :nth-child(4) { animation-delay: .24s; }
  .first .bento-side > :nth-child(5) { animation-delay: .3s; }
  @supports (animation-timeline: view()) {
    .modems > .tile, .foot-word { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    header.top { animation: nav-solid linear both; animation-timeline: scroll(root); animation-range: 0 90px; }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: span 6; }
}
@media (max-width: 720px) {
  header.top { top: .5rem; margin-top: .5rem; padding-left: .7rem; }
  header.top .brand { margin-right: 0; }
  header.top .brand span { display: none; }
  header.top nav { -webkit-mask-image: linear-gradient(90deg, transparent, #000 .6rem, #000 calc(100% - .9rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 .6rem, #000 calc(100% - .9rem), transparent); padding-inline: .6rem; }
  main { padding-top: 1.4rem; }
  .row > button { width: 100%; }
  .side-wide { grid-column: span 6; } .side-narrow { grid-column: span 3; }
  .cred-grid { grid-template-columns: minmax(0, 1fr); }
  .cred-grid > div:nth-child(2) label { margin-top: .4rem; }
}