@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("https://kdigitalsolution.it/font/archivo-normal.woff2") format("woff2")}
  :root{
    --abisso:#2A1018; --petrolio:#6E1734; --laguna:#8F2948; --sabbia:#F2E4D0; --sabbia-2:#DCC6A4;
    --oro:#C6A15B; --oro-chiaro:#D9B97A; --profondo:#1B090F; --urgente:#E0605A; --ok:#7CC48A;
    --s:min(1vw,1vh);
  }
  *{box-sizing:border-box}
  html,body{inline-size:100%;block-size:100%;margin:0}
  body{background:#000;color:var(--sabbia);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
    background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.85) 0,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 75%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='102' height='58.89'%3E%3Cg fill='%23200C13' stroke='%23362029' stroke-width='.8'%3E%3Cpolygon points='31,0 15.5,26.85 -15.5,26.85 -31,0 -15.5,-26.85 15.5,-26.85'/%3E%3Cpolygon points='133,0 117.5,26.85 86.5,26.85 71,0 86.5,-26.85 117.5,-26.85'/%3E%3Cpolygon points='31,58.89 15.5,85.74 -15.5,85.74 -31,58.89 -15.5,32.04 15.5,32.04'/%3E%3Cpolygon points='133,58.89 117.5,85.74 86.5,85.74 71,58.89 86.5,32.04 117.5,32.04'/%3E%3Cpolygon points='82,29.44 66.5,56.29 35.5,56.29 20,29.44 35.5,2.6 66.5,2.6'/%3E%3C/g%3E%3C/svg%3E") 0 0/calc(17*var(--s)) auto}
  button,textarea{font:inherit;color:inherit}
  button{background:none;border:0;padding:0;cursor:pointer}
  :where(button,textarea):focus-visible{outline:calc(.5*var(--s)) solid var(--oro);outline-offset:calc(.6*var(--s))}
  .schermo{position:absolute;inset:0;display:none}
  .schermo.attivo{display:block}
  .esa-forma{position:absolute;inset:0;inline-size:100%;block-size:100%}

  .marchio{position:absolute;top:calc(3*var(--s));left:calc(3.5*var(--s));display:flex;align-items:center;gap:calc(1.4*var(--s));z-index:3}
  .marchio img{inline-size:calc(6.4*var(--s));block-size:calc(6.4*var(--s))}
  .targa{font-weight:700;font-size:calc(2.9*var(--s));letter-spacing:.05em;text-transform:uppercase;color:var(--petrolio);background:var(--sabbia);padding:calc(.7*var(--s)) calc(1.6*var(--s));border-radius:99px;line-height:1.1}
  .ora{position:absolute;top:calc(4.2*var(--s));right:calc(4*var(--s));font-size:calc(3.3*var(--s));font-weight:600;color:var(--sabbia-2);z-index:3}
  .anello{position:absolute;left:50%;top:50%;inline-size:0;block-size:0}
  .cella{--w:calc(12.6*var(--s));position:absolute;left:0;top:0;inline-size:var(--w);block-size:calc(var(--w)*.8525);margin:calc(var(--w)*-.42625) 0 0 calc(var(--w)*-.5);
    display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s;opacity:.88}
  .cella .esa-forma{fill:rgba(110,23,52,.55);stroke:rgba(198,161,91,.7);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill .35s,stroke .35s}
  .cella .ico{position:relative;inline-size:40%;block-size:40%;fill:none;stroke:var(--oro-chiaro);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
  .cella .avviso{position:absolute;top:-6%;right:6%;min-inline-size:calc(3.3*var(--s));block-size:calc(3.3*var(--s));padding:0 calc(.8*var(--s));border-radius:99px;background:var(--urgente);color:#fff;font-size:calc(2.1*var(--s));font-weight:800;display:grid;place-items:center}
  .cella.su{opacity:1;filter:drop-shadow(0 0 calc(2.2*var(--s)) rgba(198,161,91,.55))}
  .cella.su .esa-forma{fill:var(--oro);stroke:var(--oro-chiaro)}
  .cella.su .ico{stroke:var(--profondo)}
  .cella:focus-visible{outline:none}
  .cella.su:focus-visible .esa-forma{stroke:#fff;stroke-width:2.5}
  .js-entra .cella{animation:entra .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.15s + var(--i)*60ms)}
  .js-entra .cella:not(.su) .esa-forma{animation:accende 1s ease-out backwards;animation-delay:calc(1.1s + var(--i)*90ms)}
  @keyframes entra{from{opacity:0}}
  @keyframes accende{0%{fill:rgba(110,23,52,.55)}35%{fill:rgba(198,161,91,.6)}100%{fill:rgba(110,23,52,.55)}}

  .cuore{position:absolute;left:50%;top:50%;inline-size:calc(50*var(--s));block-size:calc(50*var(--s)*.8525);transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 calc(7*var(--s))}
  .cuore .esa-forma{fill:rgba(27,9,15,.92);stroke:var(--oro);stroke-width:1.6;vector-effect:non-scaling-stroke;transition:stroke .25s,fill .25s}
  .cuore>*:not(svg){position:relative;display:block}
  .cuore{transition:filter .25s,transform .25s}
  .cuore:focus,.cuore:focus-visible{outline:none;filter:drop-shadow(0 0 calc(2.6*var(--s)) rgba(198,161,91,.75));transform:translate(-50%,-50%) scale(1.04)}
  .cuore:focus .esa-forma{stroke:var(--oro-chiaro);stroke-width:2;fill:rgba(42,16,24,.96)}
  .cuore .invito{display:flex;align-items:center;gap:calc(.9*var(--s));margin-top:calc(1.6*var(--s));font-size:calc(2.3*var(--s));font-weight:650;color:var(--oro);letter-spacing:.03em;padding:calc(.6*var(--s)) calc(1.8*var(--s));border-radius:99px;border:calc(.25*var(--s)) solid rgba(198,161,91,.55)}
  .cuore .invito svg{inline-size:calc(2.8*var(--s));block-size:calc(2.8*var(--s));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .cuore .invito-attivo{display:none}
  .cuore:focus .invito{background:var(--oro);color:var(--profondo);border-color:var(--oro)}
  .cuore:focus .invito-riposo{display:none}
  .cuore:focus .invito-attivo{display:inline}
  .cuore .conta{font-size:calc(2.3*var(--s));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
  .cuore .nome{font-size:calc(4.6*var(--s));font-weight:650;letter-spacing:-.025em;margin-top:calc(.8*var(--s));line-height:1.05}
  .cuore .numero{font-size:calc(10.5*var(--s));font-weight:660;letter-spacing:-.04em;color:var(--oro-chiaro);line-height:1;margin-top:calc(1.2*var(--s))}
  .cuore .cosa{font-size:calc(2.8*var(--s));color:var(--sabbia-2);margin-top:calc(.8*var(--s));line-height:1.2;max-inline-size:28ch}

  .pillola{position:absolute;bottom:calc(3*var(--s));display:flex;align-items:center;gap:calc(1.1*var(--s));padding:calc(1.3*var(--s)) calc(2.6*var(--s));border-radius:99px;font-size:calc(2.9*var(--s));font-weight:650;z-index:3}
  .pillola svg{inline-size:calc(3.4*var(--s));block-size:calc(3.4*var(--s));fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  #vaiRuolo{left:calc(3*var(--s));border:calc(.3*var(--s)) solid var(--sabbia);color:var(--sabbia)}
  .pillola{transition:transform .2s,box-shadow .2s,background-color .2s,color .2s}
  .pillola:focus{outline:calc(.6*var(--s)) solid #fff;outline-offset:calc(.8*var(--s));box-shadow:0 0 calc(3*var(--s)) rgba(198,161,91,.8);transform:scale(1.08)}
  #vaiRuolo:focus{background:var(--sabbia);color:var(--petrolio)}
  .anello:not(:focus-within) .cella.su{filter:none}
  .anello:not(:focus-within) .cella.su .esa-forma{fill:rgba(198,161,91,.45)}

  .pagina{position:absolute;inset:0;padding:calc(6*var(--s)) calc(7*var(--s));display:flex;flex-direction:column;gap:calc(2.4*var(--s))}
  .testata{display:flex;align-items:center;gap:calc(2.6*var(--s))}
  .testata .tessera{position:relative;flex:none;inline-size:calc(11*var(--s));block-size:calc(11*var(--s)*.8525);display:grid;place-items:center}
  .testata .tessera .esa-forma{fill:var(--oro);stroke:var(--oro-chiaro);stroke-width:1.2;vector-effect:non-scaling-stroke}
  .testata .tessera .ico{position:relative;inline-size:44%;block-size:44%;fill:none;stroke:var(--profondo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .testata h1{margin:0;font-size:calc(4.8*var(--s));font-weight:650;letter-spacing:-.03em;line-height:1.05}
  .testata p{margin:calc(.7*var(--s)) 0 0;font-size:calc(2.4*var(--s));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
  .elenco{display:flex;flex-direction:column;gap:calc(1.6*var(--s));min-block-size:0;overflow:auto;padding:calc(1*var(--s))}
  .riga{display:flex;align-items:center;gap:calc(3*var(--s));text-align:left;inline-size:100%;padding:calc(2.1*var(--s)) calc(3*var(--s));border-radius:calc(2.6*var(--s));
    background:rgba(242,228,208,.05);border:calc(.3*var(--s)) solid rgba(242,228,208,.16);transition:border-color .2s,background-color .2s}
  .riga:focus,.riga:focus-visible{outline:none;border-color:var(--oro);background:rgba(198,161,91,.16);box-shadow:0 0 calc(2*var(--s)) rgba(198,161,91,.35)}
  .riga .n{font-size:calc(7*var(--s));font-weight:660;letter-spacing:-.04em;color:var(--oro-chiaro);min-inline-size:calc(11*var(--s))}
  .riga .t{font-size:calc(3.3*var(--s));font-weight:600;line-height:1.2}
  .riga .t small{display:block;font-size:calc(2.4*var(--s));font-weight:500;color:var(--sabbia-2);margin-top:calc(.4*var(--s))}
  .riga .spunta{margin-left:auto;inline-size:calc(5*var(--s));block-size:calc(5*var(--s));border-radius:50%;border:calc(.35*var(--s)) solid var(--sabbia-2);flex:none;display:grid;place-items:center}
  .riga.fatto{opacity:.55}
  .riga.fatto .spunta,.riga.scelto .spunta{border-color:var(--oro);background:var(--oro)}
  .riga.fatto .spunta::after,.riga.scelto .spunta::after{content:"";inline-size:35%;block-size:60%;border:solid var(--profondo);border-width:0 calc(.6*var(--s)) calc(.6*var(--s)) 0;transform:translateY(-12%) rotate(45deg)}
  .riga .pallino{inline-size:calc(2.2*var(--s));block-size:calc(2.2*var(--s));border-radius:50%;flex:none}
  .urgente{background:var(--urgente)} .attenzione{background:var(--oro-chiaro)} .ok{background:var(--ok)}
  .nota{font-size:calc(2.3*var(--s));color:var(--sabbia-2);text-align:center;margin-top:auto}

  textarea{inline-size:100%;block-size:calc(13*var(--s));resize:none;border-radius:calc(2.4*var(--s));padding:calc(2*var(--s)) calc(2.6*var(--s));font-size:calc(3.2*var(--s));
    background:rgba(242,228,208,.05);border:calc(.3*var(--s)) solid rgba(242,228,208,.3)}
  textarea::placeholder{color:var(--sabbia-2)}
  textarea:focus{outline:none;border-color:var(--oro);box-shadow:0 0 calc(2*var(--s)) rgba(198,161,91,.4)}
  .proposte{display:flex;flex-wrap:wrap;gap:calc(1.4*var(--s))}
  .chip{padding:calc(1.3*var(--s)) calc(2.4*var(--s));border-radius:99px;font-size:calc(2.7*var(--s));font-weight:600;color:var(--oro-chiaro);border:calc(.3*var(--s)) solid rgba(198,161,91,.6)}
  .chip:focus{background:var(--oro);color:var(--profondo);outline:none}
  .chip-cancella{color:var(--sabbia);border-color:rgba(242,228,208,.5)}
  .chip-cancella:focus{background:var(--sabbia);color:var(--petrolio)}
  .risposta{font-size:calc(3.3*var(--s));line-height:1.35;padding:calc(2.4*var(--s)) calc(2.8*var(--s));border-radius:calc(2.4*var(--s));border-left:calc(.8*var(--s)) solid var(--oro);background:rgba(242,228,208,.06);min-block-size:0;overflow:auto}
  .risposta:empty{display:none}

  .avviso-toast{position:absolute;left:50%;top:69%;transform:translateX(-50%);padding:calc(1.3*var(--s)) calc(3*var(--s));border-radius:99px;background:var(--oro);color:var(--profondo);font-weight:700;font-size:calc(2.8*var(--s));opacity:0;transition:opacity .25s;pointer-events:none;z-index:5;white-space:nowrap}
  .avviso-toast.su{opacity:1}
  @media (prefers-reduced-motion:reduce){.cella{transition:none}.js-entra .cella,.js-entra .cella .esa-forma{animation:none}}