/* Il tipo di carattere del prototipo, servito dal dominio del sito. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/font/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/font/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

html,body{margin:0;padding:0;background:#07080A;color:#F5F5F7;font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
*{box-sizing:border-box}
a{color:oklch(78% 0.16 155);text-decoration:none}
a:hover{color:oklch(88% 0.12 155)}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
input::placeholder{color:rgba(235,235,245,0.35)}
::-webkit-scrollbar{display:none}

/* Le tre animazioni di sfondo del prototipo. */
@keyframes orbA{0%{transform:translate(-20%,-10%) scale(1)}50%{transform:translate(10%,15%) scale(1.15)}100%{transform:translate(-20%,-10%) scale(1)}}
@keyframes orbB{0%{transform:translate(20%,30%) scale(1.1)}50%{transform:translate(-10%,-5%) scale(0.95)}100%{transform:translate(20%,30%) scale(1.1)}}
@keyframes orbC{0%{transform:translate(0,60%) scale(1)}50%{transform:translate(15%,20%) scale(1.2)}100%{transform:translate(0,60%) scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (min-width:768px){@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}

/* Chi ha chiesto al sistema operativo meno animazioni le ottiene: gli orb di
   sfondo si fermano e l'entrata in scena diventa immediata. Il testo resta,
   perché parte comunque da opacità piena. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* L'immagine dentro un riquadro del prototipo: riempie il contenitore e non
   deforma. Riempie e basta: niente position:absolute, perché due dei riquadri
   del prototipo (la miniatura nel carrello, quella dei correlati) non sono
   posizionati, e un'immagine assoluta li scavalcherebbe prendendosi tutta la
   pagina. La misura gliela dà sempre il riquadro. */
.bm-slot{width:100%;height:100%;object-fit:cover;display:block;border:0}
.bm-slot-vuota{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-size:12px;line-height:1.35;color:rgba(235,235,245,0.45);background:rgba(255,255,255,0.03)}

/* Il contorno di chi naviga da tastiera: nel prototipo non c'era. */
:focus-visible{outline:2px solid oklch(85% 0.14 155);outline-offset:2px;border-radius:8px}

/* Il primo disegno scritto nell'HTML: se ne vede uno solo, quello giusto per
   la larghezza dello schermo. Quando il JavaScript prende in mano la pagina li
   sostituisce tutti con quello vero, e questa regola non serve più. */
[data-bm-pre]{display:none}
@media (max-width:767px){[data-bm-pre="mobile"]{display:block}}
@media (min-width:768px) and (max-width:1199px){[data-bm-pre="tablet"]{display:block}}
@media (min-width:1200px){[data-bm-pre="desktop"]{display:block}}

@media (hover:hover){.bmh1mh0uyg:hover{background:rgba(255,255,255,0.10) !important}}
@media (hover:hover){.bmhm6so16:hover{background:rgba(255,255,255,0.09) !important}}
@media (hover:hover){.bmh1k01i0x:hover{transform:translateY(-4px) !important;background:rgba(255,255,255,0.09) !important}}