@view-transition { navigation: auto; }

@font-face {
  font-family: 'Anybody';
  src: url('font/anybody.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans';
  src: url('font/spline-sans.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('font/spline-mono.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

@property --larg { syntax: '<number>'; inherits: false; initial-value: 150; }

:root {
  --passo: 4px;
  --riga: calc(var(--passo) * 7);           

  --bg: #05070f;                             
  --surface: #0b0e1a;
  --surface-2: #121624;
  --border: rgba(210, 214, 226, .16);
  --border-hi: rgba(210, 214, 226, .34);
  --targa: #e9e9f0;
  --inchiostro: #0a0a12;                     
  --inchiostro-2: #3a3a48;                   
  --inchiostro-3: #5b5b6b;                   

  --text: #d2d6e2;                           
  --dim: #9aa2b8;                            
  --faint: #727a90;                          

  --magenta: #e8057f;                        
  --magenta-leg: #ff7ab8;                    
  --blu: #158ae8;
  --accent: #25c5fd;                         
  --accent-dk: #158ae8;
  --up: #25c5fd;
  --down: #ff969b;
  --gold: #deba42;

  --gc: #deba42;
  --bf: #00d7e8;
  --dh: #ff969b;
  --hf: #90d378;

  --r-sm: 0;
  --r: 0;
  --r-lg: 0;

  --bordo: max(24px, calc((100vw - 1240px) / 2 + 24px));
  --logo-largo: min(1040px, 86vw);
  
  --corsa: min(340px, calc(14px + var(--logo-largo) * .4286));
  
  --barra-alta: 68px;

  --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --curva: cubic-bezier(.2, .9, .2, 1);
  --taglio: polygon(0 1.8%, 100% 0, 100% 98.2%, 0 100%);
}

@supports (color: oklch(0.5 0.1 200)) {
  :root {
    --magenta: oklch(.605 .244 359);
    --blu: oklch(.623 .170 250);
    --accent: oklch(.771 .145 229);
    --magenta-leg: oklch(.78 .19 359);
    --gc: oklch(.80 .14 92);
    --bf: oklch(.80 .14 205);
    --dh: oklch(.80 .14 18);
    --hf: oklch(.80 .14 138);
  }
}

* { box-sizing: border-box; margin: 0; }

html {
  scroll-behavior: smooth;
  
  scroll-padding-top: calc(var(--barra-alta) + 8px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Spline Sans', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: var(--riga);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                        
}

body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(62% 58% at 78% 0%, color-mix(in oklch, var(--blu) 16%, transparent), transparent 70%),
    radial-gradient(48% 46% at 14% 0%, color-mix(in oklch, var(--magenta) 11%, transparent), transparent 72%);
}
@supports not (color: color-mix(in oklch, red, blue)) {
  body::before {
    background:
      radial-gradient(62% 58% at 78% 0%, rgba(21, 138, 232, .16), transparent 70%),
      radial-gradient(48% 46% at 14% 0%, rgba(232, 5, 127, .11), transparent 72%);
  }
}
body > * { position: relative; z-index: 1; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; }
.narrow { max-width: 860px; }

img, video, iframe { max-width: 100%; }

::selection { background: var(--accent); color: var(--bg); }

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

.eyebrow, .sec, .matricola, .stato, .num, .demo-bar, .upd, .foot-col h3,
.piede-targa, .n, .chiodo, .spec dt, nav a.nl, .chip {
  font-family: var(--mono);
  font-size: 11px;
  line-height: calc(var(--passo) * 4);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}

h1, .display, .nome {
  font-family: 'Anybody', 'Arial Narrow', sans-serif;
  font-variation-settings: 'wdth' var(--larg);
  font-weight: 800;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

h1, .display {
  background: linear-gradient(180deg, #ffffff 0%, #d7dbe9 38%, #9aa2b8 58%, #ffffff 82%, #cfd6e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 26px color-mix(in oklch, var(--accent) 40%, transparent))
    drop-shadow(0 0 70px color-mix(in oklch, var(--magenta) 24%, transparent));
}
@supports not (color: color-mix(in oklch, red, blue)) {
  h1, .display { filter: drop-shadow(0 0 24px rgba(37, 197, 253, .38)); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stira { animation: stira linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}
@keyframes stira { from { --larg: 64; } to { --larg: 150; } }

nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
nav .wrap { display: flex; align-items: center; gap: 6px; height: var(--barra-alta); }

nav::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--accent));
  transform: scaleX(1);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    nav::after { animation: barra linear both; animation-timeline: scroll(root); }
  }
}
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: 18px;
  transition: opacity .3s var(--curva);
}
.logo:hover, .logo:focus-visible { opacity: .72; }

.logo svg { display: none; }
.segno {
  display: block;
  
  width: 118px;
  
  height: auto;
  aspect-ratio: 1280 / 412;
  object-fit: cover;
  object-position: center 52.5%;
  
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent),
                      linear-gradient(to bottom, transparent, #000 1%, #000 99%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent),
              linear-gradient(to bottom, transparent, #000 1%, #000 99%, transparent);
  mask-composite: intersect;
}
.foot-brand .segno { width: 139px; }

nav a.nl {
  color: var(--dim);
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid transparent;
  transition: color .3s var(--curva), border-color .3s var(--curva);
}
nav a.nl:hover { color: #fff; border-color: var(--border); }
nav a.nl.on { color: #fff; border-color: var(--border-hi); }
nav .sp { flex: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 0;
  white-space: nowrap;
  transition: transform .4s var(--curva), box-shadow .4s var(--curva),
              background-color .4s var(--curva), border-color .4s var(--curva);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { flex: none; }

.btn-p {
  color: var(--inchiostro);
  background: linear-gradient(174deg, #ffffff 0 42%, #d2d5e2 62%, #ffffff 100%);
  border: 1px solid #ffffff;
}
.btn-p:hover {
  box-shadow: 0 0 0 1px var(--magenta), 0 12px 40px color-mix(in oklch, var(--magenta) 40%, transparent);
  transform: translateY(-2px);
}
.btn-g {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-hi);
}
.btn-g:hover { color: #fff; border-color: var(--accent); background: var(--surface); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--accent);
}

.eyebrow .pip, .dots i, .status .pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex: none;
  display: inline-block;
}

.brandart { padding: calc(var(--riga) * 1.5) 0 0; z-index: auto; }
.brandart img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(56px, 13vw, 76px);
  margin: 0 0 0 -8px;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                      linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
              linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
  
  view-transition-name: wordmark;
}

.brandart .ba-home { display: block; width: fit-content; max-width: 100%; }
.brandart .ba-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.brandart.big { padding: calc(var(--riga) * .5) 0 0; }
.brandart.big .ba-media {
  position: relative;
  
  width: var(--logo-largo);
  margin-inline: auto;
  
  aspect-ratio: 7 / 3;
  overflow: visible;
  
  pointer-events: none;
  
  mix-blend-mode: screen;
  container-type: inline-size;
}
.brandart.big .ba-video,
.brandart.big .ba-fermo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 100%;
  height: auto;                
  view-transition-name: none;
}

.brandart.big .ba-fermo { display: none; }

.brandart.big .studios {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: .2cqw;
  font-family: 'Anybody', 'Arial Narrow', sans-serif;
  font-variation-settings: 'wdth' 100;
  
  font-weight: 200;
  font-size: 4cqw;
  line-height: 1;
  letter-spacing: .38em;
  text-indent: .38em;          
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: .82;
}
@media (prefers-reduced-motion: reduce) {
  .brandart.big .ba-video { display: none; }
  .brandart.big .ba-fermo { display: block; }
  
  .brandart.big .studios { display: none; }
}

.hero { padding: calc(var(--riga) * 2.25) 0 0; max-width: 1192px; }
.hero h1 {
  
  font-size: clamp(2.5rem, 7.7vw, 7rem);      
  line-height: calc(var(--riga) * 4);         
  margin: calc(var(--riga) / 2) 0 0;
  
}
.hero h1 .g { color: inherit; }
.hero .sub {
  color: var(--text);
  font-size: 20px;
  line-height: calc(var(--riga) * 1.25);      
  max-width: 62ch;
  margin: var(--riga) 0 0;
}
.hero .sub b { color: #fff; font-weight: 600; }

i { font-style: italic; color: inherit; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: calc(var(--riga) * 1.25); }

.hero h1:not(.stira) { font-size: clamp(2.25rem, 6.6vw, 5.5rem); line-height: calc(var(--riga) * 3); }

.section { margin-top: calc(var(--riga) * 3.5); }
.sec {
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 var(--riga);
  padding-bottom: calc(var(--passo) * 2);
  border-bottom: 1px solid var(--border);
  display: block;
}

.targa {
  margin: calc(var(--riga) * 3) 0 0;
  padding: 3px 0;
  background: linear-gradient(92deg, var(--magenta), var(--blu) 44%, var(--accent) 72%, var(--magenta));
  -webkit-clip-path: var(--taglio);
  clip-path: var(--taglio);
}

.targa-in, .spec dl {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(120, 126, 148, .16)),
    linear-gradient(101deg,
      #fdfdff 0 6%, #d9dce7 6% 8.5%, #f7f8fc 8.5% 19%, #c3c7d6 19% 21%, #fbfbfe 21% 33%,
      #e2e5ef 33% 36%, #ffffff 36% 49%, #cdd1de 49% 51.5%, #f9fafd 51.5% 63%,
      #dfe2ec 63% 65%, #ffffff 65% 78%, #c8ccda 78% 80%, #f8f9fd 80% 91%,
      #dcdfe9 91% 93%, #fcfcff 93% 100%);
  color: var(--inchiostro);
}
.targa-in {
  -webkit-clip-path: var(--taglio);
  clip-path: var(--taglio);
  padding-block: calc(var(--riga) * 1.75);
}

.targa-in > .wrap { display: grid; row-gap: var(--riga); }
@supports not (clip-path: polygon(0 0, 1px 0, 1px 1px)) {
  .targa, .targa-in, .spec, .spec dl { -webkit-clip-path: none; clip-path: none; }
}

.matricola { color: var(--inchiostro-2); }
.sep { color: var(--magenta); padding: 0 .45em; }

.indice { list-style: none; margin: 0; padding: 0; }
.indice li { border-top: 1px solid rgba(10, 10, 18, .22); }
.indice li:last-child { border-bottom: 1px solid rgba(10, 10, 18, .22); }
.riga {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 7fr) 12ch;
  align-items: baseline;
  column-gap: var(--riga);
  padding: calc(var(--passo) * 3) 0;
  text-decoration: none;
  color: inherit;
  transition: background-color .35s var(--curva), padding-left .35s var(--curva);
}
a.riga:hover, a.riga:focus-visible { background: rgba(10, 10, 18, .07); padding-left: calc(var(--passo) * 3); }
.nome {
  font-size: clamp(1.4rem, 3.1vw, 2.75rem);
  line-height: calc(var(--riga) * 1.5);
  font-variation-settings: 'wdth' 112;
  color: var(--inchiostro);
}
a.riga:hover .nome { color: #000; }
.mecc { color: var(--inchiostro-2); font-size: 16px; }
.stato { color: var(--inchiostro-2); display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.stato::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--magenta); flex: none;
}
.piede-targa { color: var(--inchiostro-2); }

.chiodo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--inchiostro);
  color: #fff;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid var(--magenta);
  padding: 3px 9px;
  margin: 0 4px;
  cursor: pointer;
  anchor-name: --ancora-rtp;
}
.chiodo:hover, .chiodo:focus-visible { background: var(--magenta); }
.nota-pop {
  margin: 0;
  border: 0;
  padding: calc(var(--riga) / 2) calc(var(--riga) * .75);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--magenta), 0 24px 60px rgba(0, 0, 0, .7);
  max-width: 46ch;
  font-size: 15px;
  line-height: calc(var(--passo) * 6);
}
.nota-pop b { color: #fff; }
@supports (anchor-name: --a) {
  .nota-pop { position-anchor: --ancora-rtp; position-area: block-end span-inline-end; margin-top: 10px; }
}
@supports not (anchor-name: --a) {
  .nota-pop:popover-open { position: fixed; inset: auto auto 24px 24px; }
}

@supports not selector(:popover-open) {
  .nota-pop { display: block; position: static; margin-top: var(--riga); }
}

.spec {
  margin-top: var(--riga);
  padding: 3px;
  background: linear-gradient(92deg, var(--magenta), var(--blu) 44%, var(--accent) 72%, var(--magenta));
  -webkit-clip-path: var(--taglio);
  clip-path: var(--taglio);
}

.spec dl {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  padding: calc(var(--riga) * 1.25) clamp(18px, 3vw, 40px);
  -webkit-clip-path: var(--taglio);
  clip-path: var(--taglio);
}
.spec .row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: var(--riga);
  padding: calc(var(--passo) * 2.5) 0;
  border-top: 1px solid rgba(10, 10, 18, .18);
}
.spec .row:first-child { border-top: 0; }
@supports not (grid-template-columns: subgrid) {
  .spec dl { display: block; }
  .spec .row { display: grid; }
  .spec .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.spec dt { color: var(--inchiostro-2); align-self: center; }
.spec dd {
  margin: 0;
  color: var(--inchiostro);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.spec dd a { color: var(--inchiostro); text-decoration-color: var(--magenta); text-underline-offset: 3px; }
.spec dd a:hover { color: #000; }
.spec dd .hl {
  background: var(--inchiostro);
  color: #fff;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.spec-note {
  color: var(--dim);
  font-size: 14px;
  line-height: calc(var(--passo) * 5);
  margin-top: var(--riga);
  max-width: 78ch;
}
.spec-note a { color: var(--accent); }

.feats { display: grid; row-gap: 0; }
.feat-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: var(--riga);
  padding: calc(var(--riga) * .85) 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.feat-row:last-child { border-bottom: 1px solid var(--border); }
.ico {
  color: var(--accent);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.feat-row h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  line-height: var(--riga);
  margin-bottom: calc(var(--passo));
}
.feat-row p { color: var(--dim); font-size: 16px; line-height: calc(var(--passo) * 6); max-width: 76ch; }
.feat-row p i { color: var(--text); font-style: italic; }
.feat-row p b { color: var(--text); }

.feat-row .ico { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .feat-row .ico { animation: accendi linear both; animation-timeline: view(); animation-range: entry 6% cover 30%; }
  }
}
@keyframes accendi {
  from { border-color: var(--border); box-shadow: none; }
  to   { border-color: color-mix(in oklch, var(--accent) 60%, transparent); box-shadow: 0 0 22px color-mix(in oklch, var(--accent) 26%, transparent); }
}

.cards { display: grid; gap: 1px; background: var(--border); grid-template-columns: 1fr; }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--bg);
  padding: calc(var(--riga) * 1.25) calc(var(--riga) * .9);
  display: grid;
  align-content: start;
  row-gap: calc(var(--passo) * 2);
}
.card .num { color: var(--magenta-leg); }
.card h3 { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -.01em; line-height: var(--riga); }
.card p { color: var(--dim); font-size: 16px; line-height: calc(var(--passo) * 6); }

.passaggi { display: grid; row-gap: var(--riga); }
.passo { display: grid; grid-template-columns: 5ch minmax(0, 1fr); column-gap: var(--riga); max-width: 74ch; }
.passo .n { color: var(--accent); }
.passo b { color: #fff; font-weight: 600; }

.demo {
  margin-top: calc(var(--riga) * 2);
  border: 1px solid var(--border);
  background: var(--surface);
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.dots { display: inline-flex; gap: 5px; color: var(--magenta); }
.demo iframe { display: block; width: 100%; height: 660px; border: 0; background: var(--bg); }
.demo-cap {
  
  color: var(--dim);
  margin-top: calc(var(--passo) * 3);
  font-size: 14px;
  line-height: calc(var(--passo) * 5);
}
.demo-cap a { color: var(--accent); }

.ops {
  margin-top: calc(var(--riga) * 4);
  padding: calc(var(--riga) * 2) 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  row-gap: var(--riga);
}
.ops h2 {
  font-family: 'Anybody', sans-serif;
  font-variation-settings: 'wdth' 124;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 4rem);
  line-height: calc(var(--riga) * 2);
  color: #fff;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ops p.lead { color: var(--dim); font-size: 17px; max-width: 68ch; }
.ops p.lead b { color: #fff; }

.prose { max-width: 76ch; margin: calc(var(--riga) * 2) 0 0; }
.prose h1 {
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: calc(var(--riga) * 2);
  margin-bottom: calc(var(--passo) * 2);
}
.prose .upd { color: var(--faint); margin-bottom: calc(var(--riga) * 1.5); }
.prose h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: calc(var(--riga) * 1.5) 0 calc(var(--passo) * 2);
  padding-bottom: calc(var(--passo) * 2);
  border-bottom: 1px solid var(--border);
}
.prose p, .prose li { color: var(--text); font-size: 17px; line-height: calc(var(--riga) * 1.1); }
.prose p + p { margin-top: var(--riga); }
.prose ul { padding-left: 22px; margin: var(--riga) 0; }
.prose li { margin: calc(var(--passo) * 2) 0; }
.prose li b, .prose p b { color: #fff; font-weight: 600; }
.box {
  border-left: 2px solid var(--magenta);
  background: var(--surface);
  padding: var(--riga);
  margin: var(--riga) 0;
}
.box p { color: var(--text); }

main.docs { margin-top: calc(var(--riga) * 1.5); }
.docs-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--riga); align-items: start; }

.docs-lato { font-size: 15px; line-height: calc(var(--passo) * 6); }
.docs-indice { display: none; }
.docs-menu { border: 1px solid var(--border); background: var(--surface); }
.docs-menu summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: calc(var(--passo) * 2);
  align-items: baseline;
  padding: calc(var(--passo) * 3) calc(var(--passo) * 4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.docs-menu summary::-webkit-details-marker { display: none; }
.docs-menu summary span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dim);
  letter-spacing: .06em;
}
.docs-menu summary::after { content: '+'; color: var(--dim); }
.docs-menu[open] summary::after { content: '\2212'; }
.docs-menu .docs-voci { padding: 0 calc(var(--passo) * 4) calc(var(--passo) * 4); }

.docs-gruppo {
  font-family: var(--mono);
  font-size: 11px;
  line-height: calc(var(--passo) * 4);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin: calc(var(--passo) * 4) 0 calc(var(--passo) * 1.5);
}
.docs-voci > .docs-gruppo:first-child { margin-top: calc(var(--passo) * 2); }
.docs-voci ul { list-style: none; padding: 0; }
.docs-voci a {
  display: block;
  padding: 3px 0 3px calc(var(--passo) * 3);
  color: var(--dim);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.docs-voci a:hover { color: #fff; }
.docs-voci a[aria-current="page"] { color: #fff; border-left-color: var(--magenta); }
.docs-toc { border-left: 1px solid var(--border); }
.docs-toc a { font-size: 14px; line-height: calc(var(--passo) * 5); border-left: 0; }
.docs-toc .l3 a { padding-left: calc(var(--passo) * 6); }

@media (min-width: 1040px) {
  .docs-griglia { grid-template-columns: 264px minmax(0, 1fr); gap: calc(var(--riga) * 2); }
  .docs-lato {
    position: sticky;
    top: calc(var(--barra-alta) + var(--riga));
    max-height: calc(100vh - var(--barra-alta) - var(--riga) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: calc(var(--passo) * 2);
  }
  .docs-menu { display: none; }
  .docs-indice { display: block; }
}

.docs-corpo { min-width: 0; max-width: 820px; }
.docs-corpo h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: calc(var(--riga) * 2);
  margin: calc(var(--passo) * 2) 0;
}
.docs-corpo .upd { display: block; color: var(--faint); margin-bottom: calc(var(--riga) * 1.5); }

.docs-testo > * + *, .docs-testo blockquote > * + *, .op > * + * { margin-top: calc(var(--passo) * 4); }
.docs-testo p, .docs-testo li { font-size: 17px; line-height: var(--riga); }
.docs-testo h2 {
  font-size: 26px;
  line-height: calc(var(--passo) * 9);
  font-weight: 600;
  color: #fff;
  margin-top: calc(var(--riga) * 2);
  padding-top: calc(var(--passo) * 5);
  border-top: 1px solid var(--border);
}
.docs-testo h3 { font-size: 20px; line-height: var(--riga); font-weight: 600; color: #fff; margin-top: calc(var(--riga) * 1.5); }
.docs-testo h4 {
  font-family: var(--mono);
  font-size: 11px;
  line-height: calc(var(--passo) * 4);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin-top: var(--riga);
}
.docs-testo ul, .docs-testo ol { padding-left: calc(var(--passo) * 6); }
.docs-testo li + li, .docs-testo li > ul, .docs-testo li > ol { margin-top: calc(var(--passo) * 2); }
.docs-testo strong, .docs-testo b { color: #fff; font-weight: 600; }
.docs-testo a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.docs-testo code {
  font-family: var(--mono);
  font-size: .86em;
  color: #fff;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0 5px;
  overflow-wrap: anywhere;
}
.docs-testo pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--magenta);
  padding: calc(var(--passo) * 4) calc(var(--passo) * 5);
  overflow-x: auto;
  font-size: 14px;
  line-height: calc(var(--passo) * 6);
}
.docs-testo pre code { background: none; border: 0; padding: 0; font-size: inherit; color: var(--text); overflow-wrap: normal; }
.docs-testo blockquote {
  border-left: 2px solid var(--magenta);
  background: var(--surface);
  padding: calc(var(--passo) * 4) calc(var(--passo) * 5);
}
.docs-testo hr { border: 0; border-top: 1px solid var(--border); }
.docs-testo img, .docs-testo video { display: block; height: auto; border: 1px solid var(--border); }

.tabella { overflow-x: auto; }
.docs-testo table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: calc(var(--passo) * 6); }
.docs-testo th, .docs-testo td {
  text-align: left;
  vertical-align: top;
  padding: calc(var(--passo) * 2) calc(var(--passo) * 3);
  border-bottom: 1px solid var(--border);
}
.docs-testo :is(th, td):first-child { padding-left: 0; }
.docs-testo thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dim);
  white-space: nowrap;
  border-bottom-color: var(--border-hi);
}
.docs-testo tbody th { color: var(--dim); font-weight: 500; }

.docs-testo td:first-child code { overflow-wrap: normal; white-space: nowrap; }

.ancora { margin-left: calc(var(--passo) * 2); color: var(--faint); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .2s; }
:is(h2, h3, h4):hover > .ancora, .ancora:focus-visible { opacity: 1; }
@media (hover: none) { .ancora { display: none; } }

.docs-testo .docs-sintesi { font-size: 20px; line-height: calc(var(--passo) * 8); color: #fff; }
.docs-azioni { display: flex; flex-wrap: wrap; gap: calc(var(--passo) * 3); }
.docs-fasi { border-top: 1px solid var(--border); }
.docs-fasi dt {
  font-family: var(--mono);
  font-size: 11px;
  line-height: calc(var(--passo) * 4);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: calc(var(--passo) * 4);
}
.docs-fasi dd { margin: var(--passo) 0 0; padding-bottom: calc(var(--passo) * 4); border-bottom: 1px solid var(--border); }
@media (min-width: 720px) {
  .docs-fasi { display: grid; grid-template-columns: 176px minmax(0, 1fr); }
  .docs-fasi dt, .docs-fasi dd { margin: 0; padding: calc(var(--passo) * 4) 0; border-bottom: 1px solid var(--border); }
  .docs-fasi dt { padding-right: calc(var(--passo) * 4); padding-top: calc(var(--passo) * 5); }
}
.docs-testo .nota { color: var(--dim); font-size: 15px; line-height: calc(var(--passo) * 6); }
.docs-gioco { border-left: 2px solid var(--tinta, var(--border)); padding-left: calc(var(--passo) * 5); }
.docs-gioco > * + * { margin-top: calc(var(--passo) * 2); }
.docs-testo .docs-gioco h3 { margin-top: 0; }
.docs-testo .docs-link { font-size: 15px; color: var(--faint); }
.docs-media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border); }
.docs-gioco + .docs-gioco { margin-top: calc(var(--riga) * 1.5); }
.docs .dim { color: var(--dim); }

.docs-seguenti {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--passo) * 4);
  margin-top: calc(var(--riga) * 2.5);
  padding-top: var(--riga);
  border-top: 1px solid var(--border);
}
.docs-seguenti a {
  display: block;
  padding: calc(var(--passo) * 4) calc(var(--passo) * 5);
  border: 1px solid var(--border);
  color: #fff;
  text-decoration: none;
  transition: border-color .3s var(--curva), background-color .3s var(--curva);
}
.docs-seguenti a:hover { border-color: var(--accent); background: var(--surface); }
.docs-seguenti a span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: calc(var(--passo) * 4);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--passo);
}
.docs-dopo { grid-column: 2; text-align: right; }

.docs-scarica { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--passo) * 3) calc(var(--passo) * 4); }
.docs-scarica span { color: var(--dim); font-size: 15px; }
.op { border: 1px solid var(--border); padding: calc(var(--passo) * 5); margin-top: calc(var(--passo) * 6); }
.op-loro { border-left: 2px solid var(--magenta); }
.docs-testo .op h3 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--passo) * 2) calc(var(--passo) * 3); }
.metodo {
  font-family: var(--mono);
  font-size: 12px;
  line-height: calc(var(--passo) * 5);
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  padding: 0 calc(var(--passo) * 2);
}
.lato {
  font-family: var(--mono);
  font-size: 11px;
  line-height: calc(var(--passo) * 5);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  border: 1px solid var(--magenta);
  padding: 0 calc(var(--passo) * 2);
}
.docs-testo .op-sintesi { color: #fff; }
.docs-testo .op-firma { color: var(--dim); font-size: 15px; }
.mime { color: var(--faint); font-family: var(--mono); font-size: 12px; }

footer {
  margin-top: calc(var(--riga) * 4);
  border-top: 1px solid var(--border);
  padding: calc(var(--riga) * 1.5) 0 calc(var(--riga) * 2);
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--riga); }
.foot-brand p { color: var(--dim); font-size: 15px; line-height: calc(var(--passo) * 6); margin-top: calc(var(--passo) * 2); max-width: 46ch; }
.foot-col { display: grid; align-content: start; row-gap: calc(var(--passo) * 2); }
.foot-col h3 { color: var(--faint); font-weight: 500; }
.foot-col a { color: var(--dim); text-decoration: none; font-size: 15px; }
.foot-col a:hover { color: var(--accent); }
.foot-btm {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 3) var(--riga);
  justify-content: space-between;
  margin-top: calc(var(--riga) * 1.5);
  padding-top: var(--riga);
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: 14px;
  line-height: calc(var(--passo) * 5);
}

@media (max-width: 1040px) { nav a.nl.hide-l { display: none; } }
@media (max-width: 900px) {
  
  h1, .display { --larg: 92; }
  .nome { font-variation-settings: 'wdth' 96; }
  .stira { animation: none; }
  nav a.nl.hide-m { display: none; }
  .riga { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .stato { justify-self: start; }
  .spec dl { display: block; }
  .spec .row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .targa, .targa-in, .spec, .spec dl { -webkit-clip-path: none; clip-path: none; }
  
  .demo iframe { height: 640px; height: min(760px, max(560px, calc(100svh - 124px))); }
}
@media (max-width: 620px) {
  nav a.nl.hide-s { display: none; }
  :root { --barra-alta: 60px; }
  .feat-row { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--passo) * 2); }
  .passo { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .btn { width: 100%; justify-content: center; }
  
  nav .btn { width: auto; }
}

nav.consegna {
  position: fixed;
  inset: 0 0 auto;
  opacity: 0;
  
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

nav.consegna .segno { flex: none; }

@keyframes consegna {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  72% {
    translate: var(--dx) calc(var(--dy) * .72);
    scale: var(--fine);
    opacity: 1;
  }
  100% {
    translate: var(--dx) var(--dy);
    scale: var(--fine);
    opacity: 0;
  }
}
@keyframes arriva { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .brandart.big .ba-media {
      
      --dx: calc(var(--bordo) - 7px - (100vw - var(--logo-largo)) / 2);
      
      --segno-y: calc((var(--barra-alta) - 38px) / 2);
      --dy: calc(var(--corsa) + var(--segno-y) - 18.45px);
      
      --fine: calc(126px / var(--logo-largo));
      transform-origin: left top;
      animation: consegna linear both;
      animation-timeline: scroll(root);
      animation-range: 0 var(--corsa);
    }
    nav.consegna {
      animation: arriva linear both;
      animation-timeline: scroll(root);
      
      animation-range: calc(var(--corsa) * .72) var(--corsa);
    }
  }
}

@supports not (animation-timeline: scroll()) {
  nav.consegna { position: sticky; inset: 0 auto auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  nav.consegna { position: sticky; inset: 0 auto auto; opacity: 1; }
}