.svz { position: relative; background: #030A24; }
html.u-light .svz { background: #F2F6FF; }
.svz-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.svz .tour { position: absolute; inset: 0; border-radius: 0; }
.svz .tour.is-percorso::after { display: none; }
.svz-sc { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .5s; }
.svz-sc.is-r { background: linear-gradient(270deg, rgba(3, 10, 36, .80) 0, rgba(3, 10, 36, .46) 30%, transparent 58%); }
.svz-sc.is-l { background: linear-gradient(90deg, rgba(3, 10, 36, .80) 0, rgba(3, 10, 36, .46) 30%, transparent 58%); }
html.u-light .svz-sc.is-r { background: linear-gradient(270deg, rgba(242, 246, 255, .90) 0, rgba(242, 246, 255, .55) 30%, transparent 58%); }
html.u-light .svz-sc.is-l { background: linear-gradient(90deg, rgba(242, 246, 255, .90) 0, rgba(242, 246, 255, .55) 30%, transparent 58%); }
.svz-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.svz-ui.is-giro { transition: opacity .5s ease; opacity: 0; }
.svz-ui.is-giro * { pointer-events: none !important; }
.svz-top { position: absolute; left: var(--gutter, 1.25rem); right: var(--gutter, 1.25rem); top: calc(var(--header-h, 4.5rem) + 16px); display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; pointer-events: none; }
.svz-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: .45rem; font: 600 .8125rem var(--font-sans); letter-spacing: .01em; color: #DCE8FF; padding: .5rem .95rem; min-height: 2.5rem; border-radius: 999px; border: 1px solid rgba(140, 180, 255, .30); background: rgba(8, 14, 40, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.svz-chip:hover { border-color: rgba(160, 200, 255, .65); }
.svz-chip.on { color: #06122C; background: var(--ac, #5CA1FF); border-color: var(--ac, #5CA1FF); box-shadow: 0 0 24px color-mix(in srgb, var(--ac, #5CA1FF) 45%, transparent); }
.svz-chip svg { width: 1.05em; height: 1.05em; }
html.u-light .svz-chip { color: var(--ink); background: rgba(255, 255, 255, .82); border-color: rgba(60, 100, 255, .28); }
html.u-light .svz-chip.on { color: #fff; background: var(--ac-i, #3358E0); border-color: var(--ac-i, #3358E0); }
.svz-all { margin-left: auto; pointer-events: auto; font: 650 .72rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #CFE6FF; text-decoration: none; padding: .55rem .2rem; border-bottom: 1px solid rgba(160, 200, 255, .5); }
html.u-light .svz-all { color: var(--ink); border-bottom-color: rgba(40, 80, 200, .5); }
.svz-card { position: absolute; top: 50%; width: min(31rem, 41vw); transform: translateY(-50%); pointer-events: auto; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 28px; color: #EAF3FF; background: rgba(8, 14, 40, .62); border: 1px solid color-mix(in srgb, var(--ac, #5CA1FF) 42%, rgba(120, 160, 255, .25)); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); box-shadow: 0 30px 80px rgba(0, 0, 6, .45), 0 0 60px color-mix(in srgb, var(--ac, #5CA1FF) 18%, transparent), inset 0 1px rgba(255, 255, 255, .07); transition: opacity .22s, transform .22s, left .5s, right .5s; }
.svz-ui[data-side="r"] .svz-card { right: clamp(1.5rem, 6vw, 6.5rem); left: auto; }
.svz-ui[data-side="l"] .svz-card { left: clamp(1.5rem, 6vw, 6.5rem); right: auto; }
.svz-card.is-out { opacity: 0; transform: translateY(calc(-50% + 10px)); }
html.u-light .svz-card { color: var(--ink); background: rgba(255, 255, 255, .78); border-color: color-mix(in srgb, var(--ac-i, #3358E0) 40%, rgba(60, 100, 255, .22)); box-shadow: 0 24px 70px rgba(30, 50, 110, .16), inset 0 1px rgba(255, 255, 255, .8); }
.svz-kk { margin: 0; font: 650 .72rem/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ac, #5CA1FF); }
html.u-light .svz-kk { color: var(--ac-i, #3358E0); }
.svz-card h2 { margin: .7rem 0 0; font: 800 clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem)/1.02 var(--font-sans); letter-spacing: -.04em; color: inherit; }
.svz-ds { margin: .9rem 0 0; font: 400 clamp(1.05rem, 1rem + .35vw, 1.28rem)/1.4 var(--font-serif); color: inherit; opacity: .92; }
.svz-inc { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; font: 600 .9rem/1.3 var(--font-sans); }
.svz-inc li { display: flex; gap: .6rem; align-items: baseline; }
.svz-inc li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; transform: translateY(-1px); background: var(--ac, #5CA1FF); box-shadow: 0 0 10px var(--ac, #5CA1FF); }
html.u-light .svz-inc li::before { background: var(--ac-i, #3358E0); box-shadow: none; }
.svz-go { margin-top: 1.4rem; }
.svz-rail { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; pointer-events: auto; }
.svz-tk { display: block; width: 4px; height: 16px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; background: rgba(160, 190, 255, .45); transition: height .3s, background .3s, width .3s; position: relative; }
.svz-tk::after { content: ""; position: absolute; inset: -4px -10px; }
.svz-tk.on { height: 30px; width: 5px; background: var(--ac, #5CA1FF); box-shadow: 0 0 12px var(--ac, #5CA1FF); }
.svz-tk.gap { margin-top: 8px; }
html.u-light .svz-tk { background: rgba(50, 90, 220, .42); } html.u-light .svz-tk.on { background: var(--ac-i, #3358E0); box-shadow: none; }
.svz-hint { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .35rem; font: 650 .68rem var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #CFE6FF; transition: opacity .5s; pointer-events: none; }
.svz-hint i { width: 1px; height: 22px; background: linear-gradient(#CFE6FF, transparent); animation: svz-giu 1.8s ease-in-out infinite; }
html.u-light .svz-hint { color: var(--ink); } html.u-light .svz-hint i { background: linear-gradient(var(--ink), transparent); }
.svz-hint.off { opacity: 0; }
@keyframes svz-giu { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .svz-hint i { animation: none; } .svz-card { transition: none; } }
@media (max-width: 799px) {
  .svz-card { top: auto; bottom: 5.6rem; left: 12px !important; right: 12px !important; width: auto; transform: none; padding: 1.1rem 1.15rem; border-radius: 22px; }
  .svz-card.is-out { transform: translateY(8px); }
  .svz-card h2 { font-size: 1.75rem; margin-top: .5rem; }
  .svz-ds { font-size: 1rem; margin-top: .6rem; }
  .svz-inc { display: none; }
  .svz-go { margin-top: .9rem; }
  .svz-rail { right: 10px; gap: 14px; } .svz-tk { height: 10px; } .svz-tk.on { height: 22px; } .svz-tk::after { inset: -7px -10px; }
  .svz-top { gap: .4rem; flex-wrap: nowrap; left: 0; right: 0; padding-inline: var(--gutter, 1.25rem); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; pointer-events: auto; } .svz-top::-webkit-scrollbar { display: none; }
  .svz-chip { padding: .4rem .75rem; min-height: 2.5rem; font-size: .74rem; flex: none; } .svz-chip svg { display: none; } .svz-all { display: none; }
  .svz-hint { bottom: auto; top: 46%; font-size: .72rem; }
  .svz-sc.is-l, .svz-sc.is-r { background: linear-gradient(0deg, rgba(3, 10, 36, .82) 0, rgba(3, 10, 36, .4) 36%, transparent 60%); }
  html.u-light .svz-sc.is-l, html.u-light .svz-sc.is-r { background: linear-gradient(0deg, rgba(242, 246, 255, .92) 0, rgba(242, 246, 255, .5) 36%, transparent 60%); }
}
.svz-elenco { margin: 0 0 var(--s6, 1.5rem); }
.svz-nascosto { display: none !important; }
.svz .svz-card, .svz .svz-top, .svz .svz-rail, .svz .svz-hint, .svz .svz-sc { transition: opacity .45s; }
.svz .tour-hit:not(:hover):not(:focus-visible) .tour-tag { opacity: 0; }
.svz .svz-cap { z-index: 3; transition: opacity .45s; }
.svz:not(.is-intro) .svz-cap { opacity: 0; }
.svz.is-intro .svz-card, .svz.is-intro .svz-top, .svz.is-intro .svz-rail, .svz.is-intro .svz-sc { opacity: 0; pointer-events: none; }
.svz.is-intro .svz-chip, .svz.is-intro .svz-card *, .svz.is-intro .svz-tk { pointer-events: none; }
@media (max-width: 799px) {
  .svz .svz-cap.is-hero { top: calc(var(--header-h, 4.5rem) + 12px); max-width: calc(100vw - 2 * var(--gutter, 1.25rem)); }
  .svz .svz-cap.is-hero h2 { font-size: clamp(2.3rem, 12vw, 3.3rem); }
  .svz .svz-cap .stz-lead { margin-top: 1rem; font-size: 1.02rem; line-height: 1.45; }
  .svz.is-intro .svz-hint { top: auto; bottom: 6.6rem; }
}
.svz-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease-out; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--ac, #79BFFF) 24%, transparent), transparent 62%); }
@media (hover: hover) { .svz-card:hover::after { opacity: 1; } }
