@font-face{font-family:Prata;src:url(caratteri/prata-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(caratteri/dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(caratteri/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(caratteri/dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Saira;src:url(caratteri/saira-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Saira;src:url(caratteri/saira-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(caratteri/manrope-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(caratteri/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root,[data-tema=floreale]{
  --fondo:#E3ECDC;--fondo2:#D3E0CB;--carta:#F3F6EC;--inchiostro:#22382C;--tenue:#4A6152;--linea:#B3C6AD;
  --accento:#B9482F;--su-accento:#FFF6EF;--oro:#8F6214;--bene:#2F6B46;--male:#A83A2A;
  --titoli:Prata,Georgia,serif;--testo:"DM Sans",system-ui,sans-serif;--raggio:22px;--raggio-p:14px;--maiuscolo:none;--spazio-titoli:0;
}
[data-tema=tecnologico]{
  --fondo:#060E1A;--fondo2:#0B1A2C;--carta:#0C1C30;--inchiostro:#DFF4FF;--tenue:#8FB4CB;--linea:#1F4057;
  --accento:#5CE1FF;--su-accento:#04202C;--oro:#FFB547;--bene:#6BE8A8;--male:#FF8A6B;
  --titoli:Saira,"DM Sans",sans-serif;--testo:Saira,"DM Sans",sans-serif;--raggio:3px;--raggio-p:2px;--maiuscolo:uppercase;--spazio-titoli:.08em;
}
[data-tema=serio]{
  --fondo:#EEEDE9;--fondo2:#E2E0DA;--carta:#F8F7F4;--inchiostro:#23293A;--tenue:#525A6C;--linea:#C5C4BD;
  --accento:#23293A;--su-accento:#F8F7F4;--oro:#8A6A2C;--bene:#2C6148;--male:#9A3324;
  --titoli:Manrope,"DM Sans",sans-serif;--testo:"DM Sans",system-ui,sans-serif;--raggio:6px;--raggio-p:4px;--maiuscolo:none;--spazio-titoli:-.01em;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;color-scheme:light}
[data-tema=tecnologico]{color-scheme:dark}
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--inchiostro);font:400 17px/1.5 var(--testo);transition:background-color .5s,color .5s}
::selection{background:var(--accento);color:var(--su-accento)}
:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
*{scrollbar-color:var(--linea) transparent;scrollbar-width:thin}
h1,h2,h3{font-family:var(--titoli);font-weight:400;margin:0;text-wrap:balance}
button,textarea,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}

#giardino{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.barra,.tavolo,.schede-basso{position:relative;z-index:1}

.barra{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,3vw,36px);padding-top:max(14px,env(safe-area-inset-top))}
.marchio{font:400 24px/1 var(--titoli);letter-spacing:var(--spazio-titoli);text-transform:var(--maiuscolo)}
.data{color:var(--tenue);font-size:15px}
.azioni{margin-left:auto;display:flex;gap:6px}
.tondo{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--tenue);transition:background-color .2s,color .2s}
[data-tema=tecnologico] .tondo,[data-tema=serio] .tondo{border-radius:var(--raggio-p)}
.tondo:hover{background:var(--fondo2);color:var(--inchiostro)}
.tondo.grande{width:48px;height:48px;flex:none}
.tondo.pieno{background:var(--accento);color:var(--su-accento)}
.tondo.pieno:hover{background:var(--accento);filter:brightness(1.12);color:var(--su-accento)}
.tondo.attivo{background:var(--male);color:#fff}

.tavolo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(20px,3vw,48px);padding:0 clamp(16px,3vw,36px) 24px;align-items:start;max-width:1500px;margin:auto}
.dialogo{display:flex;flex-direction:column;height:calc(100dvh - 94px);position:sticky;top:12px;min-width:0}
.apertura{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);flex:none}
#presenza{width:clamp(130px,17vw,220px);height:clamp(130px,17vw,220px);flex:none}
.benvenuto{min-width:0}
h1{font-size:clamp(38px,5vw,62px);line-height:1.08;letter-spacing:var(--spazio-titoli)}
[data-tema=tecnologico] h1{text-transform:uppercase}
[data-tema=serio] h1{font-weight:700;letter-spacing:-.02em}
.saluto{margin:10px 0 0;max-width:62ch;font-size:18px;line-height:1.5}
.invito{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 18px;border:1px solid var(--accento);color:var(--accento);border-radius:999px;font-weight:500;text-decoration:none;transition:background-color .2s,color .2s}
[data-tema=tecnologico] .invito,[data-tema=serio] .invito{border-radius:var(--raggio-p)}
.invito:hover{background:var(--accento);color:var(--su-accento)}
.invito:disabled{opacity:.55;cursor:default}
.invito.piccolo{padding:6px 14px;margin:0;font-size:15px}
.dialogo.parlando .apertura{gap:12px}
.dialogo.parlando #presenza{width:84px;height:84px}
.dialogo.parlando h1,.dialogo.parlando .saluto,.dialogo.parlando .invito{display:none}

.conversazione{flex:1;overflow-y:auto;padding:14px 4px;display:flex;flex-direction:column;gap:14px;min-height:0}
.msg{max-width:min(68ch,92%);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.utente{align-self:flex-end;background:var(--fondo2);padding:10px 16px;border-radius:var(--raggio)}
.msg.romolo{align-self:flex-start}
.msg.errore{color:var(--male)}
.attesa{color:var(--tenue);font-size:15px}
.scheda{align-self:flex-start;width:min(560px,100%);flex:none;background:var(--carta);border:1px solid var(--linea);border-radius:var(--raggio);padding:14px 16px;box-shadow:0 8px 24px -16px rgb(0 0 0/.35)}
.scheda h3{font:700 15px/1.3 var(--testo);color:var(--tenue);margin-bottom:8px}
.scheda label{display:block;font-size:14px;color:var(--tenue);margin-top:8px}
.scheda input,.scheda textarea{display:block;width:100%;margin-top:3px;padding:8px 10px;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--raggio-p);color:var(--inchiostro)}
.scheda textarea{min-height:180px;resize:vertical}
.scheda img{display:block;max-width:100%;max-height:320px;border-radius:var(--raggio-p)}
.scheda .piede{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.scheda .esito{color:var(--tenue);font-size:15px}
.scheda a:not(.invito){color:var(--accento);text-underline-offset:3px}

.stato-voce{margin:0 0 8px;color:var(--accento);font-weight:500;font-size:15px}
.scrivi{display:flex;align-items:flex-end;gap:8px;background:var(--carta);border:1px solid var(--linea);border-radius:calc(var(--raggio) + 6px);padding:7px;flex:none}
.scrivi:focus-within{border-color:var(--accento)}
.scrivi textarea{flex:1;min-width:0;border:0;background:none;resize:none;padding:11px 6px;outline:0;max-height:180px;line-height:1.4}
.scrivi textarea::placeholder{color:var(--tenue);opacity:1}

.giornata{padding-bottom:24px;min-width:0}
.giornata h2{font-size:24px;margin:30px 0 8px;letter-spacing:var(--spazio-titoli);text-transform:var(--maiuscolo)}
[data-tema=tecnologico] .giornata h2{font-size:17px;color:var(--accento)}
[data-tema=serio] .giornata h2{font-size:19px;font-weight:700}
.testa-giornata{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.testa-giornata h2{margin:0}
.testa-giornata.seconda{margin-top:30px}
#proposte h3{font:700 15px/1.3 var(--testo);color:var(--tenue);margin:12px 0 2px 6px}
.righe{list-style:none;margin:0;padding:0}
.righe li+li{border-top:1px solid var(--linea)}
.riga{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;width:100%;text-align:left;padding:11px 6px;border-radius:var(--raggio-p);transition:background-color .15s}
.riga:hover{background:var(--fondo2)}
.riga svg{color:var(--oro);margin-top:1px}
.riga b{font-weight:500;overflow-wrap:anywhere}
.riga span{grid-column:2;color:var(--tenue);font-size:15px;line-height:1.35}
.righe li{display:flex;align-items:center;gap:4px}
.riga{flex:1;min-width:0}
.gia-fatto{flex:none;padding:5px 10px;border:1px solid var(--linea);border-radius:999px;font-size:14px;color:var(--tenue);transition:background-color .15s,color .15s}
.gia-fatto:hover{background:var(--accento);border-color:var(--accento);color:var(--su-accento)}
[data-tema=tecnologico] .gia-fatto,[data-tema=serio] .gia-fatto{border-radius:var(--raggio-p)}
.vuoto{color:var(--tenue);padding:10px 6px;margin:0}
.scheletro{height:52px;border-radius:var(--raggio-p);background:var(--fondo2);margin:6px 0;opacity:.6}
.numeri{margin:0;display:grid;grid-template-columns:1fr auto;column-gap:16px}
.numeri dt{padding-top:10px;font-weight:500;border-top:1px solid var(--linea)}
.numeri dd{margin:0;padding-top:10px;text-align:right;font-variant-numeric:tabular-nums;border-top:1px solid var(--linea);font-family:var(--titoli);font-size:21px;line-height:1.2}
.numeri .nota{grid-column:1/-1;color:var(--tenue);font-size:15px;padding-bottom:10px}
.numeri .su{color:var(--bene)}.numeri .giu{color:var(--male)}
.fonti{color:var(--tenue);font-size:14px;margin-top:14px}

.lato{display:flex;gap:18px;border-bottom:1px solid var(--linea);margin-top:4px}
.lato button{padding:8px 2px;color:var(--tenue);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.lato button[aria-selected=true]{color:var(--inchiostro);border-color:var(--accento)}
.titolo-media{margin-bottom:2px!important}
#cerca-media{width:100%;margin:6px 0 10px;padding:10px 14px;background:var(--carta);border:1px solid var(--linea);border-radius:var(--raggio-p)}
#cerca-media::placeholder{color:var(--tenue);opacity:1}
.media{list-style:none;margin:0;padding:0}
.media li{display:grid;grid-template-columns:64px 1fr;gap:4px 12px;padding:10px 0;border-top:1px solid var(--linea);align-items:center}
.media .anteprima{width:64px;height:64px;border-radius:var(--raggio-p);object-fit:cover;background:var(--fondo2);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--oro)}
.media b{font-weight:500;overflow-wrap:anywhere;display:block}
.media small{color:var(--tenue);font-size:14px;display:block}
.media small::first-letter{text-transform:uppercase}
.media .comandi{display:flex;gap:12px;margin-top:3px;flex-wrap:wrap}
.media .comandi a,.media .comandi button{color:var(--accento);font-size:15px;text-decoration:underline;text-underline-offset:3px}
.schede-basso{display:none}
.pannello{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);border:1px solid var(--linea);border-radius:var(--raggio);background:var(--carta);color:var(--inchiostro);padding:18px 22px;box-shadow:0 30px 70px -30px rgb(0 0 0/.55)}
.pannello::backdrop{background:rgb(10 20 16/.42)}
.pannello header{display:flex;justify-content:space-between;align-items:center}
.pannello h2{font-size:26px}
.pannello h3{font:700 15px/1.3 var(--testo);margin:20px 0 6px}
.aiuto{margin:0 0 8px;color:var(--tenue);font-size:15px}
.temi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.temi button{padding:10px 6px;border:1px solid var(--linea);border-radius:var(--raggio-p);font-size:15px;display:grid;gap:6px;justify-items:center}
.temi button[aria-checked=true]{border-color:var(--accento);box-shadow:inset 0 0 0 1px var(--accento)}
.temi i{display:block;width:100%;height:34px;border-radius:calc(var(--raggio-p) - 2px)}
.temi [data-tema=floreale] i{background:linear-gradient(120deg,#D3E0CB 55%,#E9A890 55%)}
.temi [data-tema=tecnologico] i{background:linear-gradient(120deg,#060E1A 55%,#5CE1FF 55%)}
.temi [data-tema=serio] i{background:linear-gradient(120deg,#23293A 55%,#E8C189 55%)}
.spunta{display:flex;gap:10px;align-items:center;padding:3px 0}
.spunta input{width:20px;height:20px;accent-color:var(--accento);flex:none}
.cartelle{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 12px}
.connettore{display:flex;gap:8px;align-items:center;margin:0 0 18px}
.connettore code{flex:1;min-width:0;overflow-wrap:anywhere;background:var(--fondo);padding:7px 10px;border-radius:var(--raggio-p);font-size:14px}
.guida{margin-top:10px}
.guida ol{padding-left:20px;margin:6px 0;font-size:15px}
.guida li{margin-bottom:6px}
.guida code{overflow-wrap:anywhere;font-size:14px}
.storia{list-style:none;padding:0;margin:8px 0 0}
.storia li{padding:9px 0;border-top:1px solid var(--linea)}
.storia small{color:var(--tenue);display:block;font-size:14px}

[data-tema=tecnologico] body::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgb(92 225 255/.035) 1px,transparent 1px),linear-gradient(90deg,rgb(92 225 255/.035) 1px,transparent 1px);background-size:44px 44px}

@media (max-width:900px){
  .tavolo{display:block;padding-bottom:74px}
  .dialogo{height:auto;position:static}
  body[data-vista=oggi] .conversazione,body[data-vista=oggi] .scrivi{display:none}
  body[data-vista=parla] .giornata{display:none}
  body[data-vista=parla] .dialogo{height:calc(100dvh - 150px)}
  body[data-vista=parla] #presenza{width:84px;height:84px}
  body[data-vista=parla] h1,body[data-vista=parla] .saluto,body[data-vista=parla] .invito{display:none}
  .apertura{align-items:flex-start;flex-direction:column}
  #presenza{align-self:center;width:130px;height:130px}
  .data{display:none}
  .lato{display:none}
  body[data-vista=media] .dialogo{display:none}
  .schede-basso{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--carta);border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom)}
  .schede-basso button{padding:15px;font-weight:500;color:var(--tenue)}
  .schede-basso [aria-current=page]{color:var(--accento)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}