/* ==========================================================================
   SKILLY AI — assets/skilly-v11.css
   Sistema unico. Vetro e disegno. Espresso, sabbia, rame.
   © 2026 Skilly Studios™
   --------------------------------------------------------------------------
   Un solo sistema di misura: spazi a passo 4px, tipografia fluida clamp(),
   tre raggi, tre ombre, tre livelli di linea. Nessun !important di ripiego.
   ========================================================================== */

@layer tokens, base, chrome, page, studio, overlays, responsive;

/* ============================== 1 · TOKEN ================================ */
@layer tokens{
:root{
  /* --- espresso: fondo --- */
  --ink-900:#0d0906;
  --ink-800:#130e09;
  --ink-700:#181109;
  --ink-600:#1f1710;
  --ink-500:#251b13;
  --ink-400:#2c1f16;

  /* --- sabbia: contenuto --- */
  --sand-100:#f6eee1;   /* titoli */
  --sand-200:#e9dac0;   /* accenti, azioni */
  --sand-300:#bda88a;   /* testo corrente */
  --sand-400:#9c8a72;   /* secondario */

  /* --- rame: unico accento caldo --- */
  --copper:#c08a4e;
  --copper-soft:#d6a76a;

  /* --- linee: tre livelli, non venti --- */
  --line-1:rgba(246,238,225,.13);
  --line-2:rgba(246,238,225,.24);
  --line-3:rgba(246,238,225,.38);

  /* --- vetro --- */
  --glass:rgba(31,23,16,.52);
  --glass-deep:rgba(19,14,9,.78);
  --glass-edge:rgba(246,238,225,.16);
  --glass-blur:22px;

  /* --- identità delle tre intelligenze --- */
  --ai-core:#c08a4e;
  --ai-unreal:#8fa9c4;
  --ai-5emme:#9cbfa3;

  /* --- tipografia: tre famiglie, una richiesta --- */
  --f-dsp:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-ui:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* --- scala tipografica fluida --- */
  --t-hero:clamp(3.25rem,8.4vw,8.5rem);
  --t-dsp-1:clamp(2rem,4.1vw,4rem);
  --t-dsp-2:clamp(1.5rem,2.6vw,2.375rem);
  --t-dsp-3:clamp(1.25rem,1.7vw,1.625rem);
  --t-lede:clamp(1rem,1.05vw,1.1875rem);
  --t-body:clamp(.9375rem,.92vw,1.0625rem);
  --t-small:.8125rem;
  --t-micro:.6875rem;

  /* --- scala di spazi: passo 4px --- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --s-20:80px; --s-24:96px;
  --s-sec:clamp(72px,7.5vw,136px);   /* ritmo verticale fra sezioni */
  --s-blk:clamp(28px,3.2vw,52px);    /* ritmo interno ai blocchi */

  /* --- misure --- */
  --w-page:min(93vw,1900px);
  --w-read:66ch;
  --w-narrow:min(93vw,1180px);

  /* --- tre raggi --- */
  --r-s:8px; --r-m:14px; --r-l:22px;

  /* --- tre ombre --- */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 18px 40px -22px rgba(0,0,0,.72);
  --sh-3:0 48px 100px -44px rgba(0,0,0,.86);

  /* --- movimento --- */
  --ease:cubic-bezier(.22,.61,.24,1);
  --fast:160ms; --mid:240ms; --slow:520ms;

  /* --- viewport: unico proprietario in skilly-v11.js --- */
  --sk-vh:100dvh;
  --sk-vt:0px;

  color-scheme:dark;
}

/* fondo opaco di riserva quando il vetro non è disponibile */
@supports not (backdrop-filter:blur(1px)){
  :root{ --glass:rgba(24,17,11,.94); --glass-deep:rgba(14,10,7,.97); }
}
@media (prefers-reduced-transparency:reduce){
  :root{ --glass:rgba(24,17,11,.96); --glass-deep:rgba(14,10,7,.98); }
}
@media (prefers-contrast:more){
  :root{
    --sand-300:#dccbb0; --sand-400:#c3b192;
    --line-1:rgba(246,238,225,.24); --line-2:rgba(246,238,225,.4); --line-3:rgba(246,238,225,.56);
    --glass:rgba(20,14,9,.95);
  }
}
}

/* ============================== 2 · BASE ================================= */
@layer base{
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,canvas,iframe,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
input,select,textarea{font-size:16px}   /* iOS non zooma */
/* nessun ritardo di 300 ms e nessuno zoom accidentale sui comandi */
button,a,[role="button"],label,summary,.tool,.tile,.seg button,.chips button{touch-action:manipulation}
/* le superfici che scorrono lo dichiarano: il browser non deve indovinare */
.ws-log,.panel-scroll,.side-scroll,.board-wrap,.ig-wrap{touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}

html{scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  min-height:100dvh;
  background:var(--ink-900);
  color:var(--sand-300);
  font:400 var(--t-body)/1.68 var(--f-ui);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
  overflow-x:hidden;
}

/* il disegno che sta sotto al vetro: griglia tecnica + calore */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to right,var(--line-1) 1px,transparent 1px) 0 0/clamp(64px,7vw,120px) 100%,
    linear-gradient(to bottom,var(--line-1) 1px,transparent 1px) 0 0/100% clamp(64px,7vw,120px),
    radial-gradient(120% 80% at 78% -8%,rgba(192,138,78,.13),transparent 62%),
    radial-gradient(90% 70% at 8% 108%,rgba(192,138,78,.07),transparent 60%);
  opacity:.5;
  mask-image:radial-gradient(140% 110% at 50% 0%,#000 20%,rgba(0,0,0,.35) 72%,transparent 100%);
}
body>*{position:relative;z-index:1}

::selection{background:rgba(192,138,78,.32);color:var(--sand-100)}

a{color:var(--sand-200);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--sand-100);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--copper-soft);outline-offset:3px;border-radius:var(--r-s);
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- tipografia --- */
.dsp{
  font-family:var(--f-dsp);font-weight:400;line-height:1.06;letter-spacing:-.012em;
  font-size:var(--t-dsp-1);color:var(--sand-100);text-wrap:balance;
}
.dsp em{display:block;font-style:italic;color:var(--copper-soft)}   /* seconda frase sempre a capo */
.dsp-2{font-family:var(--f-dsp);font-weight:400;font-size:var(--t-dsp-2);line-height:1.1;color:var(--sand-100)}
.dsp-2 em{display:block;font-style:italic;color:var(--copper-soft)}
.dsp-3{font-family:var(--f-dsp);font-weight:400;font-size:var(--t-dsp-3);line-height:1.16;color:var(--sand-100)}
.dsp-3 em{font-style:italic;color:var(--copper-soft)}

.lede{max-width:var(--w-read);font-size:var(--t-lede);line-height:1.72;color:var(--sand-300)}
.lede + .lede{margin-top:var(--s-4)}
.lede strong,.prose strong{color:var(--sand-100);font-weight:500}
.prose{max-width:var(--w-read);color:var(--sand-300)}

.label,.plate{
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--sand-400);
}
.plate{letter-spacing:.2em}
code,kbd,samp,pre{font-family:var(--f-mono)}

/* --- vetro: superficie riutilizzabile --- */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--line-1);
  border-radius:var(--r-l);
  box-shadow:var(--sh-2);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.25);
  overflow:hidden;
}
/* il taglio del vetro sul lato alto */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(0,0,0,.34);
}
/* riflesso che segue il puntatore — solo puntatore fine */
.glass::after{content:none}
@media (hover:hover) and (pointer:fine){
  .glass::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(246,238,225,.075),transparent 68%);
    opacity:0;transition:opacity var(--slow) var(--ease);
  }
  .glass:hover::after{opacity:1}
}
@media (prefers-reduced-motion:reduce){ .glass::after{content:none} }

/* --- disegno: crocini d'allineamento --- */
.tick{position:absolute;inline-size:9px;block-size:9px;pointer-events:none;z-index:3;opacity:.5}
.tick::before,.tick::after{content:"";position:absolute;background:var(--line-3)}
.tick::before{inset-inline:0;block-size:1px;inset-block-start:4px}
.tick::after{inset-block:0;inline-size:1px;inset-inline-start:4px}
.tick.tl{inset-block-start:10px;inset-inline-start:10px}
.tick.tr{inset-block-start:10px;inset-inline-end:10px}
.tick.bl{inset-block-end:10px;inset-inline-start:10px}
.tick.br{inset-block-end:10px;inset-inline-end:10px}

/* --- ingressi di sezione --- */
[data-reveal]{opacity:1}
body.reveal-armed [data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
body.reveal-armed [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.reveal-armed [data-reveal]{opacity:1;transform:none;transition:none}
}

/* --- bottoni --- */
.btn-solid,.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:0 var(--s-6);border-radius:999px;
  font:500 var(--t-small)/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
  transition:transform var(--mid) var(--ease),background var(--mid) var(--ease),
             border-color var(--mid) var(--ease),color var(--mid) var(--ease);
  white-space:nowrap;
}
.btn-solid{
  color:#1a120c;
  background:linear-gradient(158deg,var(--sand-100),var(--sand-200) 62%,var(--copper-soft));
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-solid:hover{transform:translateY(-2px);color:#120c07}
.btn-line{
  color:var(--sand-200);border:1px solid var(--line-2);
  background:rgba(246,238,225,.035);
}
.btn-line:hover{color:var(--sand-100);border-color:var(--line-3);background:rgba(192,138,78,.1)}
.btn-lg{min-height:52px;padding:0 var(--s-8);font-size:.875rem}
.btn-solid[disabled],.btn-line[disabled]{opacity:.42;cursor:not-allowed;transform:none}
a.btn-solid:hover,a.btn-line:hover{text-decoration:none}

/* --- specifiche a pastiglia --- */
.specs2{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.specs2 span{
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sand-200);padding:var(--s-3) var(--s-4);border-radius:999px;
  border:1px solid var(--line-1);background:rgba(192,138,78,.06);
}
}

/* ========================= 3 · TELAIO: HEADER, NAV ======================= */
@layer chrome{

.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:700;
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-3) max(var(--s-4),calc((100vw - var(--w-page)) / 2));
  padding-block-start:calc(var(--s-3) + env(safe-area-inset-top,0px));
  background:rgba(13,9,6,.62);
  border-block-end:1px solid transparent;
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  transition:background var(--slow) var(--ease),border-color var(--slow) var(--ease);
}
body.sk-scrolled .hdr{background:rgba(13,9,6,.93);border-block-end-color:var(--line-1)}
@supports not (backdrop-filter:blur(1px)){ .hdr{background:rgba(13,9,6,.96)} }

.hdr-logo{display:flex;align-items:center;gap:var(--s-3);color:var(--sand-100);flex:none;min-height:44px}
.hdr-logo:hover{text-decoration:none}
.hdr-logo .mark{inline-size:26px;block-size:26px;flex:none}
.hdr-logo b{display:block;font:500 .6875rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-100)}
.hdr-logo i{display:block;font:400 .5625rem/1 var(--f-mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400)}

.hdr-mid{
  flex:1;display:flex;align-items:center;gap:var(--s-3);justify-content:center;
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400);
}
.hdr-mid i{inline-size:28px;block-size:1px;background:var(--line-2);display:block}

.hdr-end{display:flex;align-items:center;gap:var(--s-2);margin-inline-start:auto}

.acc-chip{
  min-height:44px;display:inline-flex;align-items:center;padding:0 var(--s-4);border-radius:999px;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-200);
  border:1px solid var(--line-1);background:rgba(192,138,78,.07);
  transition:border-color var(--mid) var(--ease),background var(--mid) var(--ease),color var(--mid) var(--ease);
}
.acc-chip:hover{border-color:var(--line-3);background:rgba(192,138,78,.14)}
.acc-chip.on{color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200));border-color:transparent}

.snd-btn,.nav-burger{
  inline-size:44px;block-size:44px;border-radius:var(--r-m);display:grid;place-items:center;
  border:1px solid var(--line-1);color:var(--sand-300);
  transition:color var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.snd-btn:hover,.nav-burger:hover{color:var(--sand-100);border-color:var(--line-2)}
.snd-btn svg,.nav-burger svg{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.snd-btn[aria-pressed="false"] .on-w{opacity:0}
.snd-btn[aria-pressed="true"] .off{opacity:0}
.nav-burger .x{display:none}
.nav-burger[aria-expanded="true"] .bars{display:none}
.nav-burger[aria-expanded="true"] .x{display:block}

.hdr .btn-solid{min-height:44px;padding:0 var(--s-5);font-size:var(--t-micro);letter-spacing:.14em}
.lbl-short{display:none}

/* indice a menu */
.nav-links{display:none}
#navMenu{
  position:fixed;inset-block-start:calc(78px + env(safe-area-inset-top,0px));z-index:699;
  inset-inline-end:max(var(--s-4),calc((100vw - var(--w-page)) / 2));
  inline-size:min(440px,calc(100vw - 32px));
  max-block-size:calc(100dvh - 110px);overflow:auto;
  display:none;flex-direction:column;gap:var(--s-1);
  padding:var(--s-4);border-radius:var(--r-l);
  background:var(--glass-deep);border:1px solid var(--line-1);
  box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
}
#navMenu.open{display:flex}
/* il menu aperto blocca lo scorrimento sotto, senza toccare gli stili inline */
body.nav-open{overflow:hidden}
#navMenu a,#navMenu button{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:48px;padding:0 var(--s-4);border-radius:var(--r-m);
  font:400 .9375rem/1 var(--f-ui);color:var(--sand-200);text-align:start;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
#navMenu a:hover,#navMenu button:hover{background:rgba(246,238,225,.06);color:var(--sand-100);text-decoration:none}
#navMenu .go{font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;color:var(--copper)}
#navMenu button{margin-block-start:var(--s-2);border:1px solid var(--line-2);color:var(--sand-100)}
#navMenu .menu-foot{
  display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-4);padding-block-start:var(--s-4);
  border-block-start:1px solid var(--line-1);
  font:400 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400);
}

/* ---------------- L'INTRO: il tracciato che si solidifica in vetro ------- */
#skIntro{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:var(--s-6);
  background:var(--ink-900);
  transition:opacity 620ms var(--ease),visibility 620ms;
}
#skIntro.sk-out{opacity:0;visibility:hidden;pointer-events:none}
body.sk-locked{overflow:hidden}
.sk-plate{position:relative;inline-size:min(560px,86vw);aspect-ratio:1;display:grid;place-items:center}
/* il foglio da tavolo tecnico */
.sk-sheet{
  position:absolute;inset:0;border-radius:var(--r-l);
  background:
    linear-gradient(to right,var(--line-1) 1px,transparent 1px) 0 0/40px 100%,
    linear-gradient(to bottom,var(--line-1) 1px,transparent 1px) 0 0/100% 40px;
  opacity:0;animation:skSheet 620ms var(--ease) 60ms forwards;
}
@keyframes skSheet{to{opacity:.6}}
/* il tracciato che si disegna */
.sk-draw{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.sk-draw path,.sk-draw circle,.sk-draw rect{
  fill:none;stroke:var(--copper);stroke-width:1.25;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,420);stroke-dashoffset:var(--len,420);
  animation:skTrace 900ms var(--ease) forwards;
}
.sk-draw .d2{animation-delay:180ms}
.sk-draw .d3{animation-delay:320ms}
.sk-draw .d4{animation-delay:440ms}
@keyframes skTrace{to{stroke-dashoffset:0}}
/* le quote del disegno */
.sk-quote{
  position:absolute;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.28em;
  text-transform:uppercase;color:var(--sand-400);opacity:0;
  animation:skFade 420ms var(--ease) 620ms forwards;
}
.sk-quote.q1{inset-block-start:-24px;inset-inline-start:0}
.sk-quote.q2{inset-block-end:-24px;inset-inline-end:0}
@keyframes skFade{to{opacity:1}}
/* il vetro che si solidifica sopra il tracciato */
.sk-glassify{
  position:absolute;inset:14%;border-radius:var(--r-l);
  background:var(--glass);border:1px solid var(--glass-edge);
  box-shadow:var(--sh-3),inset 0 1px 0 var(--glass-edge);
  backdrop-filter:blur(0);
  opacity:0;transform:scale(.94);
  animation:skGlass 760ms var(--ease) 900ms forwards;
}
@keyframes skGlass{
  0%{opacity:0;transform:scale(.94);backdrop-filter:blur(0) saturate(1)}
  60%{opacity:1}
  100%{opacity:1;transform:scale(1);backdrop-filter:blur(var(--glass-blur)) saturate(1.3)}
}
.sk-wordmark{
  position:relative;z-index:4;text-align:center;
  font:400 clamp(2.25rem,7vw,4.25rem)/1 var(--f-dsp);letter-spacing:.01em;color:var(--sand-100);
  opacity:0;animation:skFade 520ms var(--ease) 1180ms forwards;
}
.sk-wordmark b{font-weight:400;font-style:italic;color:var(--sand-200)}
.sk-wordmark sup{font-size:.26em;color:var(--sand-400);vertical-align:super}
.sk-wordmark small{
  display:block;margin-block-start:var(--s-4);
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.34em;text-transform:uppercase;color:var(--sand-400);
}
.sk-skip{
  position:absolute;inset-block-end:calc(var(--s-8) + env(safe-area-inset-bottom,0px));inset-inline:0;
  display:grid;justify-items:center;gap:var(--s-2);
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400);
  opacity:0;animation:skFade 420ms var(--ease) 1400ms forwards;
}
@media (prefers-reduced-motion:reduce){
  #skIntro{display:none}
}

/* -------------------- GUIDA CONTESTUALE: scheda ⇄ pastiglia ------------- */
.sk-guide{
  position:fixed;z-index:640;
  inset-block-end:calc(var(--s-5) + env(safe-area-inset-bottom,0px));
  inset-inline-start:max(var(--s-4),calc((100vw - var(--w-page)) / 2));
  inline-size:auto;max-inline-size:min(408px,calc(100vw - 32px));
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:start;
  gap:var(--s-4);padding:var(--s-4);
  border-radius:var(--r-l);
  background:var(--glass-deep);border:1px solid var(--line-1);
  box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  opacity:0;translate:0 16px;pointer-events:none;
  transition:opacity var(--slow) var(--ease),translate var(--slow) var(--ease),
             padding var(--slow) var(--ease),gap var(--slow) var(--ease);
}
.sk-guide.is-visible{opacity:1;translate:0 0;pointer-events:auto}
.sk-guide-num{
  inline-size:40px;block-size:40px;flex:none;display:grid;place-items:center;border-radius:var(--r-m);
  font:500 .8125rem/1 var(--f-mono);letter-spacing:.06em;color:#1a120c;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.sk-guide-copy{
  display:grid;gap:var(--s-1);min-width:0;
  max-inline-size:60ch;max-block-size:40em;overflow:hidden;
  transition:max-inline-size var(--slow) var(--ease),max-block-size var(--slow) var(--ease),
             opacity var(--fast) var(--ease);
}
.sk-guide-copy b{font:500 .875rem/1.3 var(--f-ui);color:var(--sand-100)}
.sk-guide-copy p{font:400 .8125rem/1.55 var(--f-ui);color:var(--sand-300)}
.sk-guide-link{
  justify-self:start;margin-block-start:var(--s-1);
  display:inline-flex;align-items:center;min-height:24px;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--copper-soft);
}
.sk-guide-toggle{
  inline-size:44px;block-size:44px;flex:none;border-radius:var(--r-m);display:grid;place-items:center;
  border:1px solid var(--line-1);color:var(--sand-300);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.sk-guide-toggle:hover{color:var(--sand-100);border-color:var(--line-2);background:rgba(246,238,225,.05)}
.sk-guide-toggle svg{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sk-guide-toggle .ico-open{display:none}

/* la pastiglia dice di che sezione parla: non è un pallino anonimo */
.sk-guide-tag{
  align-self:center;max-inline-size:0;overflow:hidden;opacity:0;white-space:nowrap;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-200);
  transition:max-inline-size var(--slow) var(--ease),opacity var(--fast) var(--ease);
}

/* stato ridotto: la scheda si contrae verso la pastiglia, non scompare */
.sk-guide.is-min{padding:var(--s-2);gap:var(--s-2);align-items:center;max-inline-size:none}
.sk-guide.is-min .sk-guide-copy{max-inline-size:0;max-block-size:0;opacity:0}
.sk-guide.is-min .sk-guide-tag{max-inline-size:16ch;opacity:1}
.sk-guide.is-min .sk-guide-num{inline-size:36px;block-size:36px;font-size:.75rem}
.sk-guide.is-min .sk-guide-toggle .ico-min{display:none}
.sk-guide.is-min .sk-guide-toggle .ico-open{display:block}

@media (prefers-reduced-motion:reduce){
  .sk-guide,.sk-guide .sk-guide-copy,.sk-guide .sk-guide-tag{transition:none}
}
/* mai sopra Studio, Città o Account */
body.ws-open .sk-guide,body.city-open .sk-guide,body.account-open .sk-guide{display:none}
}


/* ========================= 4 · PAGINA PUBBLICA =========================== */
@layer page{

main{display:block}

/* --- impianto di sezione: numero di tavola + contenuto libero --- */
.sec{padding-block:var(--s-sec);scroll-margin-block-start:104px}
.sec-in{
  inline-size:var(--w-page);margin-inline:auto;
  display:grid;gap:var(--s-blk);
}
.sec-head{
  display:grid;grid-template-columns:minmax(140px,180px) minmax(0,1fr);
  gap:var(--s-blk);align-items:start;
  padding-block-end:var(--s-6);border-block-end:1px solid var(--line-1);
}
.sec-num{position:relative;display:grid;gap:var(--s-2);padding-block-start:var(--s-2)}
.sec-num::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:56px;block-size:1px;background:var(--line-3);
}
.sec-num b{font:400 clamp(2rem,3vw,3rem)/1 var(--f-mono);letter-spacing:-.02em;color:var(--copper)}
.sec-num span{font:500 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--sand-400)}
.sec-copy{display:grid;gap:var(--s-4);min-width:0}

/* ------------------------------- HERO ----------------------------------- */
.stage{
  position:relative;min-block-size:100dvh;
  display:grid;align-content:center;gap:var(--s-blk);
  inline-size:var(--w-page);margin-inline:auto;
  padding-block:calc(108px + env(safe-area-inset-top,0px)) var(--s-16);
  overflow:clip;                 /* il nucleo sborda per progetto: qui si taglia */
}
#glCore{
  position:absolute;inset-block:0;inset-inline-end:-6vw;
  inline-size:min(62vw,1080px);block-size:100%;
  opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none;z-index:0;
}
#glCore.on{opacity:.62}
.stage-fallback{
  position:absolute;inset-block:0;inset-inline-end:-4vw;inline-size:min(56vw,900px);z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(192,138,78,.16),transparent 70%),
    conic-gradient(from 210deg,transparent 0 25%,rgba(246,238,225,.05) 25% 26%,transparent 26% 50%,rgba(246,238,225,.05) 50% 51%,transparent 51%);
  mask-image:radial-gradient(closest-side,#000 40%,transparent 78%);
  opacity:.55;
}
/* quando il nucleo 3D è acceso, la riserva disegnata si ritira */
.stage:has(#glCore.on) .stage-fallback{opacity:0;transition:opacity 1.2s var(--ease)}
.stage-in{position:relative;z-index:2;display:grid;gap:var(--s-6);max-inline-size:min(100%,72ch)}
.stage-top{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--sand-400);
}
.stage-top>span{white-space:nowrap}   /* le voci non si spezzano attorno ai separatori */
.stage-top .dot{inline-size:3px;block-size:3px;border-radius:50%;background:var(--copper);flex:none}
.wordmark{
  font:400 var(--t-hero)/.92 var(--f-dsp);letter-spacing:-.02em;color:var(--sand-100);
}
.wordmark b{font-weight:400;font-style:italic;color:var(--sand-200)}
.wordmark sup{font-size:.2em;letter-spacing:0;color:var(--sand-400);vertical-align:super}
/* insegna a lettere — animazione d'ingresso governata da skilly-v11.js */
.wordmark.sk-split .sk-ch{display:inline-block;white-space:pre}
body.sk-armed .wordmark.sk-split .sk-ch{
  opacity:0;transform:translateY(.24em);
  animation:skCh 620ms var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 34ms + 120ms);
}
@keyframes skCh{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  body.sk-armed .wordmark.sk-split .sk-ch{opacity:1;transform:none;animation:none}
}
.stage-claim{max-inline-size:62ch;font-size:var(--t-lede);line-height:1.7;color:var(--sand-300)}
.stage-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-2)}

/* le tre intelligenze in copertina: blocchi dati confrontabili */
.stage-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1px;background:var(--line-1);border-block:1px solid var(--line-1);
}
.stage-grid>div{
  display:grid;gap:var(--s-2);padding:var(--s-5) var(--s-5) var(--s-5) 0;
  background:var(--ink-900);
}
.stage-grid>div:not(:first-child){padding-inline-start:var(--s-5)}
.stage-grid .k{display:flex;align-items:center;gap:var(--s-2);font:500 .8125rem/1 var(--f-ui);letter-spacing:.06em;color:var(--sand-100)}
.stage-grid .k i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--ai,var(--copper));box-shadow:0 0 10px var(--ai,var(--copper))}
.stage-grid .v{font-size:.8125rem;line-height:1.6;color:var(--sand-400)}

.stage-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.scrollhint{display:flex;align-items:center;gap:var(--s-3);font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400)}
.scrollhint .wire{inline-size:clamp(40px,6vw,88px);block-size:1px;background:linear-gradient(90deg,var(--line-3),transparent)}
.scrollhint-chevron svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--copper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  animation:hintDrop 2.4s var(--ease) infinite}
@keyframes hintDrop{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:1}}
@media (prefers-reduced-motion:reduce){ .scrollhint-chevron svg{animation:none} }
.stage-tele{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--s-6);
  padding-block-start:var(--s-4);border-block-start:1px solid var(--line-1);
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400);
}
.stage-tele b{font-weight:500;color:var(--sand-200)}
.stage-tele i{font-style:normal;color:var(--copper)}

/* --------------------------- 02 · LE OPERE ------------------------------ */
.opere{display:grid;gap:var(--s-sec)}
.opus{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--s-blk) clamp(28px,4vw,72px);align-items:center;
}
.opus.alt>.opus-copy{order:2}
.opus.alt>.plate-wrap{order:1}
.opus-copy{display:grid;gap:var(--s-4);align-content:start}
.opus-k{display:flex;align-items:center;gap:var(--s-2);font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--sand-400)}
.opus-k i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--ai);box-shadow:0 0 10px var(--ai)}
.opus[data-ai="core"]{--ai:var(--ai-core)}
.opus[data-ai="unreal"]{--ai:var(--ai-unreal)}
.opus[data-ai="5emme"]{--ai:var(--ai-5emme)}
.opus-t{font:400 clamp(1.75rem,3.4vw,3.25rem)/1.02 var(--f-dsp);letter-spacing:-.015em;color:var(--sand-100)}
.opus-t span{font-style:italic;color:var(--ai)}
.opus-s{font:400 var(--t-dsp-3) var(--f-dsp);font-style:italic;color:var(--sand-200)}
.opus-d{max-inline-size:var(--w-read);color:var(--sand-300)}
.opus-facts{display:grid;gap:1px;background:var(--line-1);border-block:1px solid var(--line-1)}
.opus-facts>div{display:grid;grid-template-columns:minmax(96px,120px) minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;background:var(--ink-900)}
.opus-facts .k{font:500 var(--t-micro)/1.7 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-400)}
.opus-facts .v{font-size:.875rem;line-height:1.65;color:var(--sand-300)}
.opus-facts .v strong{color:var(--sand-100);font-weight:500}
.opus-facts .v a{display:inline-flex;align-items:center;min-height:24px}

/* --- il pannello di codice: un editor vero --- */
.plate-wrap.code{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  background:var(--glass);border:1px solid var(--line-1);
  box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);
}
.plate-wrap.code::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 rgba(0,0,0,.4);
}
.pw-corner{position:absolute;inline-size:9px;block-size:9px;z-index:4;opacity:.55;pointer-events:none}
.pw-corner::before,.pw-corner::after{content:"";position:absolute;background:var(--line-3)}
.pw-corner::before{inset-inline:0;block-size:1px;inset-block-start:4px}
.pw-corner::after{inset-block:0;inline-size:1px;inset-inline-start:4px}
.pw-corner.tl{inset-block-start:9px;inset-inline-start:9px}
.pw-corner.tr{inset-block-start:9px;inset-inline-end:9px}
.pw-corner.bl{inset-block-end:9px;inset-inline-start:9px}
.pw-corner.br{inset-block-end:9px;inset-inline-end:9px}

.cp-bar{
  position:relative;z-index:2;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-block-end:1px solid var(--line-1);
  background:rgba(13,9,6,.5);
}
.cp-bar::before{
  content:"";inline-size:34px;block-size:8px;flex:none;border-radius:99px;
  background:
    radial-gradient(circle 3px at 4px 4px,var(--line-3) 98%,transparent),
    radial-gradient(circle 3px at 17px 4px,var(--line-2) 98%,transparent),
    radial-gradient(circle 3px at 30px 4px,var(--line-1) 98%,transparent);
}
.cp-bar .f{flex:1;min-width:0;font:400 .75rem/1 var(--f-mono);letter-spacing:.04em;color:var(--sand-300);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-bar .tag{
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ai,var(--copper));
  padding:var(--s-2) var(--s-3);border-radius:999px;border:1px solid var(--line-1);flex:none;
}

.cp-code{
  position:relative;z-index:2;display:block;padding:var(--s-4) var(--s-4) var(--s-5);
  font:400 clamp(.6875rem,.78vw,.8125rem)/1.85 var(--f-mono);
  color:var(--sand-200);counter-reset:ln;
  overflow-x:auto;
  background:
    linear-gradient(90deg,rgba(13,9,6,.42) 0 3.1em,transparent 3.1em);
}
.cp-code .l{
  display:block;white-space:pre;counter-increment:ln;padding-inline-start:3.4em;position:relative;
}
.cp-code .l::before{
  content:counter(ln,decimal-leading-zero);
  position:absolute;inset-inline-start:0;inline-size:2.4em;text-align:end;
  color:var(--sand-400);opacity:.55;font-variant-numeric:tabular-nums;
}
/* il codice si scrive riga per riga quando entra nel viewport */
.plate-wrap.code.type .cp-code .l{
  opacity:0;transform:translateX(-4px);
  animation:cpLine 260ms var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 62ms);
}
@keyframes cpLine{to{opacity:1;transform:none}}
.plate-wrap.code.type .cp-code::after{
  content:"";position:absolute;inline-size:.55em;block-size:1.15em;
  background:var(--copper-soft);
  inset-inline-start:calc(var(--s-4) + 3.4em);
  inset-block-end:var(--s-5);
  animation:cpCur 1.05s steps(2,jump-none) infinite;
}
@keyframes cpCur{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .plate-wrap.code.type .cp-code .l{opacity:1;transform:none;animation:none}
  .plate-wrap.code.type .cp-code::after{animation:none;opacity:.5}
}
/* colorazione sintattica */
.cp-c{color:var(--sand-400);font-style:italic}
.cp-k{color:var(--copper-soft)}
.cp-s{color:#a8c39c}
.cp-n{color:#d9c78f}

.cp-foot{
  position:relative;z-index:2;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-block-start:1px solid var(--line-1);
  background:rgba(13,9,6,.42);min-block-size:44px;
}
.cp-foot .lb{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-400);flex:none}
.cp-foot .q{flex:1;min-width:0;display:flex;align-items:center;gap:2px;font:400 .75rem/1.5 var(--f-mono);color:var(--sand-300);overflow:hidden}
.cp-foot .q b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-foot .q i{inline-size:1px;block-size:1.05em;background:var(--copper);flex:none;animation:cpCur 1.05s steps(2,jump-none) infinite}
@media (prefers-reduced-motion:reduce){ .cp-foot .q i{animation:none} }

/* ---------------------------- 03 · TERMINALE ---------------------------- */
.term{
  border-radius:var(--r-l);overflow:hidden;
  background:var(--glass);border:1px solid var(--line-1);box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);
}
.term-bar{
  display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border-block-end:1px solid var(--line-1);background:rgba(13,9,6,.5);
}
.term-bar .dots{display:flex;gap:5px;flex:none}
.term-bar .dots i{inline-size:7px;block-size:7px;border-radius:50%;background:var(--line-2)}
.term-bar .ttl{flex:1;font:400 .75rem/1 var(--f-mono);letter-spacing:.08em;color:var(--sand-400)}
.term-bar .ttl b{font-weight:500;color:var(--sand-200)}
.term-bar .st{display:flex;align-items:center;gap:var(--s-2);font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400)}
.term-bar .st i{inline-size:6px;block-size:6px;border-radius:50%;background:#8fbf9a;box-shadow:0 0 8px rgba(143,191,154,.8)}
.term-body{padding:var(--s-5) var(--s-4);display:grid;gap:var(--s-2);font:400 .8125rem/1.7 var(--f-mono);min-block-size:132px}
.term-body .ln{display:flex;gap:var(--s-3);color:var(--sand-200)}
.term-body .ln .p{color:var(--copper);flex:none}
.term-body .ln.out{color:var(--sand-400)}
.term-body .cur{display:inline-block;inline-size:1px;block-size:1.05em;background:var(--copper-soft);
  animation:cpCur 1.05s steps(2,jump-none) infinite;vertical-align:text-bottom}
@media (prefers-reduced-motion:reduce){ .term-body .cur{animation:none} }
.term-ask{
  display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border-block-start:1px solid var(--line-1);background:rgba(13,9,6,.42);
}
.term-ask .p{color:var(--copper);font:400 .875rem/1 var(--f-mono);flex:none}
.term-ask input{
  flex:1;min-width:0;min-height:44px;font:400 .9375rem/1 var(--f-ui);color:var(--sand-100);
}
.term-ask input::placeholder{color:var(--sand-400)}
.term-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.term-chips button{
  min-height:44px;padding:0 var(--s-4);border-radius:999px;
  font:400 .8125rem/1 var(--f-ui);color:var(--sand-200);
  border:1px solid var(--line-1);background:rgba(246,238,225,.03);
  transition:border-color var(--mid) var(--ease),background var(--mid) var(--ease),color var(--mid) var(--ease);
}
.term-chips button:hover{color:var(--sand-100);border-color:var(--line-3);background:rgba(192,138,78,.1)}
.term-note{font:400 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400)}

/* ------------------------------ 04 · TILES ------------------------------ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--s-4)}
.tile{
  position:relative;display:grid;gap:var(--s-3);align-content:start;text-align:start;
  padding:var(--s-6);border-radius:var(--r-l);
  background:var(--glass);border:1px solid var(--line-1);box-shadow:var(--sh-2);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  transition:transform var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tile .ic{inline-size:38px;block-size:38px;border-radius:var(--r-m);display:grid;place-items:center;
  border:1px solid var(--line-1);background:rgba(246,238,225,.04)}
.tile .ic svg{inline-size:19px;block-size:19px;fill:none;stroke:var(--ai,var(--copper));stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile .k{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400)}
.tile h3{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.tile p{font-size:.875rem;line-height:1.62;color:var(--sand-300)}

/* ------------------------------ LA FORGIA ------------------------------- */
.voice-forge{display:grid;gap:var(--s-blk)}
.voice-teaser{
  padding:clamp(24px,3.4vw,44px);border-radius:var(--r-l);
  background:var(--glass);border:1px solid var(--line-1);box-shadow:var(--sh-2);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.voice-forge-head{display:grid;gap:var(--s-4)}
.voice-forge-head>div{display:grid;gap:var(--s-2)}
.voice-forge-k{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--sand-400)}
.voice-forge-head h3{font:400 var(--t-dsp-2) var(--f-dsp);color:var(--sand-100)}
.voice-forge-head h3 em{display:block;font-style:italic;color:var(--copper-soft)}
.voice-forge-head p{max-inline-size:var(--w-read);color:var(--sand-300)}
.forge-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),1fr));gap:var(--s-3)}
.forge-cap{
  display:grid;gap:var(--s-2);align-content:start;padding:var(--s-5);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(246,238,225,.025);
}
.forge-ico{inline-size:34px;block-size:34px;border-radius:var(--r-s);display:grid;place-items:center;
  border:1px solid var(--line-1);background:rgba(192,138,78,.08)}
.forge-ico svg{inline-size:17px;block-size:17px;fill:none;stroke:var(--copper-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.forge-cap b{font:500 .875rem/1.3 var(--f-ui);color:var(--sand-100)}
.forge-cap p{font-size:.8125rem;line-height:1.55;color:var(--sand-400)}
.forge-cap small{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
.voice-open{justify-self:start}

/* ---------------------- 05 · REGISTRO E SENTINELLE --------------------- */
/* prosa libera su righelli, non dentro riquadri */
.ledger2{display:grid;gap:1px;background:var(--line-1);border-block:1px solid var(--line-1)}
.ledger2>div{
  display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr);gap:var(--s-blk);
  padding:var(--s-6) 0;background:var(--ink-900);
}
.ledger2 .lk{font:500 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--copper)}
.ledger2 h3{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100);margin-block-end:var(--s-2)}
.ledger2 p{max-inline-size:var(--w-read);font-size:.9375rem;line-height:1.68;color:var(--sand-300)}

/* --- la pipeline delle sentinelle: un tracciato che si disegna --- */
.sentinel-demo{
  position:relative;display:grid;gap:var(--s-6);
  padding:clamp(22px,3vw,40px);border-radius:var(--r-l);
  background:var(--glass);border:1px solid var(--line-1);box-shadow:var(--sh-2);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.sentinel-demo-head{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:end;justify-content:space-between}
.sentinel-demo-head>div{display:grid;gap:var(--s-2)}
.sentinel-demo-head .eyebrow{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--sand-400)}
.sentinel-demo-head strong{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100);font-weight:400}
.sentinel-live{display:inline-flex;align-items:center;gap:var(--s-2);font:500 var(--t-micro)/1 var(--f-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--sand-300);
  padding:var(--s-2) var(--s-3);border-radius:999px;border:1px solid var(--line-1)}
.sentinel-live i{inline-size:6px;block-size:6px;border-radius:50%;background:#8fbf9a;box-shadow:0 0 8px rgba(143,191,154,.8);
  animation:senPulse 2.2s var(--ease) infinite}
@keyframes senPulse{0%,100%{opacity:1}50%{opacity:.35}}

.sentinel-rail{position:relative;block-size:2px;margin-block:var(--s-2)}
.sentinel-rail svg{position:absolute;inset:0;inline-size:100%;block-size:2px;overflow:visible}
.sentinel-rail path{
  fill:none;stroke:var(--line-2);stroke-width:1.5;vector-effect:non-scaling-stroke;
}
.sentinel-rail path.live{
  stroke:var(--copper-soft);stroke-dasharray:1000;stroke-dashoffset:1000;
  filter:drop-shadow(0 0 5px rgba(192,138,78,.6));
}
.sentinel-demo.run .sentinel-rail path.live{animation:senDraw 2.6s var(--ease) forwards}
@keyframes senDraw{to{stroke-dashoffset:0}}

.sentinel-flow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:var(--s-3);align-items:stretch;
}
.sentinel-link{display:none}
.sentinel-node{
  display:grid;gap:var(--s-2);align-content:start;
  padding:var(--s-5);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(246,238,225,.022);
  opacity:.42;transition:opacity var(--slow) var(--ease),border-color var(--slow) var(--ease),background var(--slow) var(--ease);
}
.sentinel-demo.run .sentinel-node{
  animation:senStep 420ms var(--ease) forwards;
  animation-delay:calc(var(--step,0) * 460ms + 220ms);
}
@keyframes senStep{to{opacity:1;border-color:var(--line-2);background:rgba(192,138,78,.06)}}
.sentinel-node .step{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-400)}
.sentinel-node .step b{color:var(--copper);font-weight:500}
.sentinel-icon{inline-size:32px;block-size:32px;border-radius:var(--r-s);display:grid;place-items:center;
  border:1px solid var(--line-1);background:rgba(246,238,225,.04)}
.sentinel-icon svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--copper-soft);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sentinel-node h4{font:500 .875rem/1.3 var(--f-ui);color:var(--sand-100)}
.sentinel-node p{font-size:.8125rem;line-height:1.55;color:var(--sand-400)}
.sentinel-node .result{
  margin-block-start:var(--s-2);font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand-300);padding-block-start:var(--s-3);border-block-start:1px solid var(--line-1);
}
.sentinel-ledger{
  display:flex;flex-wrap:wrap;gap:var(--s-2);padding-block-start:var(--s-4);border-block-start:1px solid var(--line-1);
}
.sentinel-ledger span{
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400);
  padding:var(--s-2) var(--s-3);border-radius:999px;border:1px solid var(--line-1);
  opacity:.4;transition:opacity var(--slow) var(--ease);
}
.sentinel-demo.run .sentinel-ledger span{
  animation:senFade 340ms var(--ease) forwards;animation-delay:calc(var(--step,0) * 460ms + 380ms);
}
@keyframes senFade{to{opacity:1;color:var(--sand-200);border-color:var(--line-2)}}
@media (prefers-reduced-motion:reduce){
  .sentinel-demo .sentinel-node,.sentinel-demo .sentinel-ledger span{opacity:1;animation:none}
  .sentinel-demo .sentinel-rail path.live{stroke-dashoffset:0;animation:none}
  .sentinel-live i{animation:none}
}

/* ---------------------------- 06 · AZIENDE ----------------------------- */
.biz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;
  background:var(--line-1);border:1px solid var(--line-1);border-radius:var(--r-m);overflow:hidden}
.biz-grid article{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-6);background:var(--ink-800)}
.biz-grid .n{font:400 1.5rem/1 var(--f-mono);color:var(--copper)}
.biz-grid h3{font:500 .9375rem/1.3 var(--f-ui);color:var(--sand-100)}
.biz-grid p{font-size:.8125rem;line-height:1.6;color:var(--sand-400)}

.offer{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:var(--s-blk);padding:clamp(24px,3.4vw,44px);border-radius:var(--r-l);
  background:var(--glass);border:1px solid var(--line-1);box-shadow:var(--sh-2);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.offer>div{display:grid;gap:var(--s-4);align-content:start}
.price{display:flex;align-items:baseline;gap:var(--s-3)}
.price b{font:400 clamp(2.25rem,4vw,3.5rem)/1 var(--f-mono);color:var(--sand-100)}
.price span{font:400 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--sand-400)}
.offer ul{display:grid;gap:var(--s-3)}
.offer li{position:relative;padding-inline-start:var(--s-6);font-size:.9375rem;line-height:1.6;color:var(--sand-300)}
.offer li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:10px;block-size:1px;background:var(--copper)}
.offer li strong{color:var(--sand-100);font-weight:500}

/* ---------------------------- 07 · LIVELLI ----------------------------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--s-4)}
.tier{
  display:grid;gap:var(--s-4);align-content:start;padding:var(--s-6);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:rgba(246,238,225,.022);
}
.tier.on{border-color:var(--line-2);background:rgba(192,138,78,.07);box-shadow:var(--sh-2)}
.tier .lvl{display:grid;gap:var(--s-1);padding-block-end:var(--s-4);border-block-end:1px solid var(--line-1)}
.tier .lvl b{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100);font-weight:400}
.tier .lvl span{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-400)}
.tier ul{display:grid;gap:var(--s-3)}
.tier li{position:relative;padding-inline-start:var(--s-5);font-size:.875rem;line-height:1.6;color:var(--sand-300)}
.tier li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.6em;inline-size:8px;block-size:1px;background:var(--line-3)}
.tier li strong{color:var(--sand-100);font-weight:500}
.tier .st{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}

.logo-marquee{overflow:hidden;border-block:1px solid var(--line-1);padding-block:var(--s-5);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:var(--s-10);inline-size:max-content;animation:mq 38s linear infinite}
.marquee-logos{display:flex;gap:var(--s-10);flex:none}
.marquee-logos span{font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400);white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }
@media (prefers-reduced-data:reduce){ .marquee-track{animation:none} }

/* ---------------------------- 08 · LA CITTÀ ---------------------------- */
.city{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:var(--s-blk);align-items:stretch;
  border-radius:var(--r-l);overflow:hidden;
  background:var(--glass);border:1px solid var(--line-1);box-shadow:var(--sh-2);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.city .cbody{display:grid;gap:var(--s-4);align-content:start;padding:clamp(24px,3.4vw,44px)}
.city .badges{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.city .badges span{
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-200);
  padding:var(--s-2) var(--s-3);border-radius:999px;border:1px solid var(--line-1);background:rgba(192,138,78,.07);
}
.city .badges span.off{color:var(--sand-400);background:transparent}
/* la vetrina: un profilo urbano disegnato, non una fotografia */
.city .cvis{position:relative;min-block-size:280px;overflow:hidden;background:var(--ink-800)}
.city .sky{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(192,138,78,.16),transparent 62%),
  linear-gradient(to bottom,transparent 58%,rgba(13,9,6,.9))}
.city .horizon{position:absolute;inset-inline:0;inset-block-end:22%;block-size:1px;background:var(--line-2)}
.city .tower{position:absolute;inset-block-end:22%;inline-size:12px;background:var(--ink-900);
  border:1px solid var(--line-2);border-block-end:0}
.city .tower::before{content:"";position:absolute;inset:3px 2px auto 2px;block-size:2px;background:var(--copper);opacity:.5}

/* ---------------------------- 09 · DOWNLOAD ---------------------------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s-4)}
.dl-card{
  display:grid;gap:var(--s-3);align-content:start;padding:clamp(22px,3vw,36px);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:rgba(246,238,225,.022);
}
.dl-k{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400)}
.dl-card h3{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.dl-card h3 em{font-style:italic;color:var(--copper-soft)}
.dl-lede{font-size:.9375rem;line-height:1.65;color:var(--sand-300)}
.dl-feats{display:grid;gap:var(--s-2);margin-block-start:var(--s-1)}
.dl-feats li{position:relative;padding-inline-start:var(--s-5);font-size:.8125rem;line-height:1.6;color:var(--sand-400)}
.dl-feats li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:8px;block-size:1px;background:var(--line-3)}
.dl-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-block-start:var(--s-2)}
.dl-btn{
  min-height:44px;padding:0 var(--s-6);border-radius:999px;
  font:500 var(--t-small)/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--sand-400);border:1px dashed var(--line-2);background:transparent;cursor:not-allowed;
}
.dl-badge{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.dl-badge.soon{color:var(--sand-400)}
.dl-note{font-size:.8125rem;line-height:1.6;color:var(--sand-400)}
.dl-toast{
  position:fixed;inset-block-end:calc(var(--s-6) + env(safe-area-inset-bottom,0px));inset-inline:0;
  margin-inline:auto;inline-size:max-content;max-inline-size:calc(100vw - 32px);z-index:660;
  padding:var(--s-3) var(--s-5);border-radius:999px;
  font-size:.875rem;color:var(--sand-100);text-align:center;
  background:var(--glass-deep);border:1px solid var(--line-1);box-shadow:var(--sh-3);
  opacity:0;translate:0 12px;pointer-events:none;
  transition:opacity var(--mid) var(--ease),translate var(--mid) var(--ease);
}
.dl-toast.show{opacity:1;translate:0 0}

/* --- sezione musica: resta nascosta come nel layer precedente --- */
#musica{display:none}
.nav-links a[href="#musica"],#navMenu a[href="#musica"]{display:none}

/* ------------------------------- FOOTER -------------------------------- */
.foot{border-block-start:1px solid var(--line-1);padding-block:var(--s-16) calc(var(--s-10) + env(safe-area-inset-bottom,0px));margin-block-start:var(--s-sec)}
.foot-in{inline-size:var(--w-page);margin-inline:auto;display:grid;gap:var(--s-12)}
.foot-top{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(auto-fit,minmax(160px,1fr));gap:var(--s-8)}
.foot-mark{display:grid;gap:var(--s-3);align-content:start}
.foot-mark .big{font:400 clamp(1.75rem,3vw,2.75rem)/1 var(--f-dsp);color:var(--sand-100)}
.foot-mark .big b{font-weight:400;font-style:italic;color:var(--sand-200)}
.foot-mark p{max-inline-size:46ch;font-size:.875rem;line-height:1.65;color:var(--sand-400)}
.foot-col{display:grid;gap:var(--s-3);align-content:start}
.foot-col b{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400)}
.foot-col a{font-size:.875rem;color:var(--sand-300);min-height:28px;display:inline-flex;align-items:center}
.foot-col a:hover{color:var(--sand-100)}
.foot-bot{
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
  padding-block-start:var(--s-6);border-block-start:1px solid var(--line-1);
  font:400 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400);
}

/* --- cartello anti-ispezione (contenuto da __SKILLY_SEC_HTML__) --------- */
#secBlock{
  position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:var(--s-5);
  background:rgba(13,9,6,.56);backdrop-filter:blur(6px);pointer-events:none;opacity:0;
  transition:opacity var(--mid) var(--ease);
}
#secBlock.on{display:grid;opacity:1}
#secBlock.out{opacity:0}
#secBlock .sec-card{
  pointer-events:auto;inline-size:min(88vw,360px);padding:var(--s-6);border-radius:var(--r-l);text-align:center;
  background:var(--glass-deep);border:1px solid var(--line-2);box-shadow:var(--sh-3);
}
#secBlock .sec-pulse{inline-size:8px;block-size:8px;border-radius:50%;margin:0 auto var(--s-3);
  background:var(--copper);box-shadow:0 0 12px rgba(192,138,78,.5);animation:senPulse 1.15s var(--ease) infinite}
#secBlock .sec-k{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--copper);margin-block-end:var(--s-2)}
#secBlock .sec-t{font:400 clamp(1.0625rem,3.2vw,1.25rem)/1.3 var(--f-dsp);color:var(--sand-100);margin-block-end:var(--s-2)}
#secBlock .sec-s{font-size:.8125rem;line-height:1.6;color:var(--sand-400)}
}


/* ============================ 5 · LO STUDIO ==============================
   Vista vera, non pannello sovrapposto: quando è aperto la pagina pubblica
   è display:none. Diventa strutturalmente impossibile intravedere la home.
   Altezza: --sk-vh scritta da un solo proprietario (skilly-v11.js);
   riserva robusta 100dvh. Mai zero, mai parziale.
   ========================================================================= */
@layer studio{

/* --- la pagina pubblica esce dal flusso quando si apre una vista --- */
body.ws-open>.hdr,
body.ws-open>#navMenu,
body.ws-open>main,
body.ws-open>.foot,
body.ws-open>#skIntro,
body.city-open>.hdr,
body.city-open>#navMenu,
body.city-open>main,
body.city-open>.foot,
body.city-open>#skIntro{display:none}
body.ws-open,body.city-open{overflow:hidden}
body.ws-open::before,body.city-open::before{display:none}

/* --- schermo di sicurezza: fondo pieno sotto la vista --- */
.ws-shield{
  position:fixed;inset:0;z-index:900;background:var(--ink-900);display:none;
}
.ws-shield.on{display:block}

.ws{
  position:fixed;z-index:950;
  inset-inline:0;
  inset-block-start:var(--sk-vt,0px);
  block-size:var(--sk-vh,100svh);
  max-block-size:var(--sk-vh,100svh);
  /* L'altezza è quella del visibile. La riserva è il FALLBACK della variabile,
     non un minimo: min-block-size:100dvh sarebbe un pavimento che vince sul
     valore reale e, con la tastiera aperta o le barre del browser estese,
     spinge il composer sotto il bordo dello schermo. Il fallback è 100svh,
     la viewport più PICCOLA garantita: non sfora nemmeno senza JS. */
  display:none;grid-template-rows:auto minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);       /* la griglia non si allarga sul contenuto */
  background:var(--ink-900);
  overflow:hidden;
}
/* nessun discendente può imporre la propria min-content alla vista */
.ws,.ws-top,.ws-tabs,.ws-body,.ws-side,.ws-main,.panel,.panel-scroll,
.chat-head,.chat-id,.ws-log,.ws-composer,.composer,.model-sel,
.crea-pane,.tex-layout,.tex-controls,.tex-stage,.forge-module,.voice-shell,
.web-workspace,.side-scroll,.board-bar{min-inline-size:0}
@supports not (height:100svh){ .ws{block-size:var(--sk-vh,100vh);max-block-size:var(--sk-vh,100vh)} }
.ws.open{display:grid}

.ws-top{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  padding-block-start:calc(var(--s-3) + env(safe-area-inset-top,0px));
  border-block-end:1px solid var(--line-1);
  background:rgba(19,14,9,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ws-top .left{display:flex;align-items:center;gap:var(--s-3);flex:none}
.icon-btn{
  inline-size:44px;block-size:44px;flex:none;border-radius:var(--r-m);display:grid;place-items:center;
  border:1px solid var(--line-1);color:var(--sand-300);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.icon-btn:hover{color:var(--sand-100);border-color:var(--line-2);background:rgba(246,238,225,.05)}
.icon-btn svg{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ws-top .brand{display:flex;align-items:center;gap:var(--s-3);min-height:44px;color:var(--sand-100)}
.ws-brand-label{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.ws-brand-label sup{font-size:.7em}
.seal{display:grid;place-items:center;border:1px solid var(--line-1);background:rgba(192,138,78,.1)}
.seal svg,.ai-seal svg{inline-size:66%;block-size:66%}
.m-ring{fill:none;stroke:var(--copper);stroke-width:5}
.m-spark{fill:var(--sand-200)}

.ws-tabs{
  flex:1;min-inline-size:0;display:flex;gap:var(--s-1);justify-content:center;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.ws-tabs::-webkit-scrollbar{display:none}
.ws-tabs button{
  min-height:44px;padding:0 var(--s-4);border-radius:999px;flex:none;scroll-snap-align:center;
  font:500 var(--t-small)/1 var(--f-ui);letter-spacing:.04em;color:var(--sand-400);
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.ws-tabs button:hover{color:var(--sand-200);background:rgba(246,238,225,.05)}
.ws-tabs button.on{color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}

.ws-body{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);min-height:0;min-inline-size:0}
.ws.side-hidden .ws-body{grid-template-columns:0 minmax(0,1fr)}
.ws.side-hidden .ws-side{visibility:hidden;padding:0;border:0}

/* --- barra laterale --- */
.ws-side{
  display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;
  border-inline-end:1px solid var(--line-1);background:rgba(19,14,9,.6);overflow:hidden;
}
.side-pad{display:grid;gap:var(--s-3);padding:var(--s-4)}
.btn-new{
  min-height:44px;border-radius:var(--r-m);
  font:500 var(--t-small)/1 var(--f-ui);letter-spacing:.06em;color:#1a120c;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200));
  transition:transform var(--fast) var(--ease);
}
.btn-new:hover{transform:translateY(-1px)}
.side-search{display:flex;align-items:center;gap:var(--s-2);padding-inline:var(--s-3);
  border-radius:var(--r-m);border:1px solid var(--line-1);background:rgba(13,9,6,.5)}
.side-search svg{inline-size:15px;block-size:15px;fill:none;stroke:var(--sand-400);stroke-width:1.7;flex:none}
.side-search input{flex:1;min-width:0;min-height:44px;font-size:.875rem;color:var(--sand-100)}
.side-search input::placeholder{color:var(--sand-400)}
.side-scroll{overflow-y:auto;padding:0 var(--s-3) var(--s-5);display:grid;gap:var(--s-1);align-content:start}
.side-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:var(--s-4) var(--s-2) var(--s-2);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sand-400)}
.side-h button{inline-size:28px;block-size:28px;border-radius:var(--r-s);border:1px solid var(--line-1);color:var(--sand-300);
  display:grid;place-items:center;font-size:.9375rem}
.side-h button:hover{color:var(--sand-100);border-color:var(--line-2)}
.side-empty{padding:var(--s-3) var(--s-2);font-size:.8125rem;line-height:1.6;color:var(--sand-400)}
.proj-form{display:none;gap:var(--s-2);padding:var(--s-2)}
.proj-form.show{display:grid}
.proj-form input{min-height:40px;padding-inline:var(--s-3);border-radius:var(--r-s);
  border:1px solid var(--line-1);background:rgba(13,9,6,.5);color:var(--sand-100);font-size:.875rem}
.proj-form button{min-height:40px;border-radius:var(--r-s);border:1px solid var(--line-2);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-200)}
.proj-item,.chat-item{
  position:relative;display:flex;align-items:center;gap:var(--s-3);
  min-height:44px;padding:var(--s-2) var(--s-3);border-radius:var(--r-m);
  font-size:.875rem;color:var(--sand-300);cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.proj-item:hover,.chat-item:hover{background:rgba(246,238,225,.05);color:var(--sand-100)}
.proj-item.on,.chat-item.on{background:rgba(192,138,78,.13);color:var(--sand-100)}
.proj-item b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-item .cnt{font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.1em;color:var(--sand-400);flex:none}
.proj-files{display:flex;flex-wrap:wrap;gap:var(--s-1);padding:0 var(--s-3) var(--s-2)}
.proj-files span{font:400 var(--t-micro)/1 var(--f-mono);color:var(--sand-400);
  padding:3px var(--s-2);border-radius:var(--r-s);border:1px solid var(--line-1);
  max-inline-size:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item .dot{inline-size:7px;block-size:7px;border-radius:50%;flex:none;background:var(--copper)}
.chat-item .dot[data-ai="skillyisunreal"]{background:var(--ai-unreal)}
.chat-item .dot[data-ai="5emme-ai"]{background:var(--ai-5emme)}
.chat-item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item.processing .dot{animation:senPulse 1.4s var(--ease) infinite}
.row-act{display:flex;gap:2px;flex:none;opacity:0;transition:opacity var(--fast) var(--ease)}
.proj-item:hover .row-act,.chat-item:hover .row-act,
.proj-item:focus-within .row-act,.chat-item:focus-within .row-act{opacity:1}
.row-act span{inline-size:28px;block-size:28px;border-radius:var(--r-s);display:grid;place-items:center;cursor:pointer;color:var(--sand-400)}
.row-act span:hover{color:var(--sand-100);background:rgba(246,238,225,.08)}
.row-act svg{inline-size:13px;block-size:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.rename-input{inline-size:100%;min-height:32px;padding-inline:var(--s-2);border-radius:var(--r-s);
  border:1px solid var(--line-2);background:rgba(13,9,6,.7);color:var(--sand-100);font-size:.875rem}

/* --- area principale e pannelli --- */
.ws-main{position:relative;min-height:0;min-inline-size:0;display:grid;grid-template-columns:minmax(0,1fr)}
.panel{display:none;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);min-height:0;min-inline-size:0;overflow:hidden}
.panel.on{display:grid}
.panel-bar{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);border-block-end:1px solid var(--line-1);background:rgba(19,14,9,.5);
}
.panel-scroll{overflow-y:auto;padding:var(--s-5) var(--s-4) var(--s-10)}
.bar-hint{font:400 var(--t-micro)/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sand-400)}
.gen-btn{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border-radius:999px;
  font:500 var(--t-small)/1 var(--f-ui);letter-spacing:.08em;color:#1a120c;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200) 60%,var(--copper-soft));
  transition:transform var(--fast) var(--ease);
}
.gen-btn:hover{transform:translateY(-1px)}
.gen-btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.gen-btn svg{inline-size:15px;block-size:15px;fill:currentColor}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line-1);background:rgba(13,9,6,.5);flex-wrap:wrap}
.seg button{min-height:38px;padding:0 var(--s-4);border-radius:999px;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sand-400)}
.seg button:hover{color:var(--sand-200)}
.seg button.on{color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
.seg.soft button{text-transform:none;letter-spacing:.04em;font-family:var(--f-ui);font-size:.8125rem}
.offline-tag{margin-inline-start:var(--s-2);font-size:.5625rem;letter-spacing:.14em;color:var(--copper)}

/* ------------------------------- CHAT ----------------------------------- */
/* Righe assegnate esplicitamente: se un elemento viene nascosto (l'intestazione
   in orizzontale, per esempio) gli altri NON slittano nella riga sbagliata.
   Senza questo, il composer finiva nella riga elastica e si schiacciava. */
#panelChat{grid-template-rows:auto minmax(0,1fr) auto}
#panelChat>.chat-head{grid-row:1}
#panelChat>.ws-log{grid-row:2}
#panelChat>.ws-composer{grid-row:3}

.chat-head{
  display:flex;align-items:center;gap:var(--s-3);min-height:52px;
  padding:var(--s-3) var(--s-4);border-block-end:1px solid var(--line-1);background:rgba(19,14,9,.5);
}
.ai-seal{inline-size:34px;block-size:34px;border-radius:var(--r-m);display:grid;place-items:center;flex:none;
  border:1px solid var(--line-1);background:rgba(192,138,78,.1)}
.chat-id{flex:1;min-inline-size:0;display:grid;gap:2px}
.chat-id b{font:500 .875rem/1.2 var(--f-ui);color:var(--sand-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-id span{font-size:.75rem;line-height:1.4;color:var(--sand-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-status{display:flex;align-items:center;gap:var(--s-2);flex:none;
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400)}
.chat-status i{inline-size:7px;block-size:7px;border-radius:50%;background:var(--sand-400);flex:none}
.chat-status[data-state="ok"] i{background:#8fbf9a;box-shadow:0 0 8px rgba(143,191,154,.8)}
.chat-status[data-state="busy"] i{background:var(--copper);animation:senPulse 1.2s var(--ease) infinite}
.chat-status[data-state="err"] i{background:#c98f7a}

.ws-log{
  overflow-y:auto;padding:var(--s-6) var(--s-4);
  display:flex;flex-direction:column;gap:var(--s-4);
  overscroll-behavior:contain;
}
.ws-hello{margin:auto;text-align:center;max-inline-size:46ch;display:grid;gap:var(--s-3);justify-items:center;padding-block:var(--s-6)}
.ws-hello .ai-seal{inline-size:48px;block-size:48px;border-radius:var(--r-m)}
.ws-hello h3{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.ws-hello p{font-size:.875rem;line-height:1.68;color:var(--sand-300)}

.msg{
  max-inline-size:min(78ch,86%);padding:var(--s-4) var(--s-5);border-radius:var(--r-m);
  font-size:.9375rem;line-height:1.68;position:relative;overflow-wrap:break-word;
}
.msg.me{align-self:flex-end;color:#1a120c;border-end-end-radius:var(--r-s);
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
.msg.ai{align-self:flex-start;border-end-start-radius:var(--r-s);color:var(--sand-200);
  background:rgba(246,238,225,.045);border:1px solid var(--line-1)}
.msg.ai.err{border-color:rgba(201,143,122,.42);color:#e8c4b4}
.msg.guarded{border-color:rgba(192,138,78,.42)}
.msg .who{display:block;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper);margin-block-end:var(--s-2)}
.msg p+p{margin-block-start:var(--s-3)}
.msg code{font:400 .8125rem var(--f-mono);background:rgba(0,0,0,.34);padding:2px 6px;border-radius:5px;color:var(--sand-100)}
.msg.me code{background:rgba(0,0,0,.12)}
.msg .stamp{display:block;margin-block-start:var(--s-2);font:400 var(--t-micro)/1 var(--f-mono);color:var(--sand-400);opacity:.8}
.msg.me .stamp{color:rgba(26,18,12,.6)}
.msg .att{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-start:var(--s-3)}
.msg .att i{font:400 var(--t-micro) var(--f-mono);font-style:normal;padding:4px var(--s-2);border-radius:5px;
  background:rgba(0,0,0,.26);border:1px solid rgba(0,0,0,.2)}
.msg.me .att i{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.14)}
.msg-act{
  display:inline-flex;align-items:center;min-height:36px;margin:var(--s-3) var(--s-2) 0 0;
  padding:0 var(--s-3);border-radius:var(--r-s);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.1em;
  color:var(--sand-100);border:1px solid var(--line-2);background:rgba(192,138,78,.1);
}
.msg-act:hover{background:rgba(192,138,78,.2)}
.guard-badge{display:inline-flex;align-items:center;gap:var(--s-2);margin-block-end:var(--s-2);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.guard-badge svg{inline-size:13px;block-size:13px;fill:none;stroke:currentColor;stroke-width:1.6}
.guard-badge.soft{color:var(--sand-400)}
.typing{align-self:flex-start;display:flex;gap:5px;padding:var(--s-3) var(--s-2)}
.typing i{inline-size:5px;block-size:5px;border-radius:50%;background:var(--copper);animation:tp 1.1s var(--ease) infinite}
.typing i:nth-child(2){animation-delay:.14s}
.typing i:nth-child(3){animation-delay:.28s}
@keyframes tp{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){ .typing i{animation:none;opacity:.7} }

/* blocchi di codice nelle risposte */
.codeblock{margin-block:var(--s-3);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-1);background:rgba(13,9,6,.6)}
.cb-head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-block-end:1px solid var(--line-1)}
.cb-lang{flex:1;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--sand-400)}
.cb-btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:32px;padding:0 var(--s-3);border-radius:var(--r-s);
  font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;color:var(--sand-300);border:1px solid var(--line-1)}
.cb-btn:hover{color:var(--sand-100);border-color:var(--line-2)}
.cb-btn.ok{color:#a8c39c;border-color:rgba(168,195,156,.4)}
.cb-btn svg{inline-size:13px;block-size:13px;fill:none;stroke:currentColor;stroke-width:1.6}
.codeblock pre{margin:0;padding:var(--s-4);overflow-x:auto}
.codeblock pre code{font:400 .8125rem/1.7 var(--f-mono);color:var(--sand-200);background:none;padding:0}

/* --- il composer e la scelta dell'intelligenza --- */
.ws-composer{display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom,0px));
  border-block-start:1px solid var(--line-1);background:rgba(19,14,9,.6)}
.attach-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.attach-row:empty{display:none}
.attach-row .chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2);border-radius:var(--r-s);
  border:1px solid var(--line-1);background:rgba(246,238,225,.04);font:400 var(--t-micro) var(--f-mono);color:var(--sand-200)}
.attach-row .thumb{inline-size:24px;block-size:24px;border-radius:4px;object-fit:cover;flex:none}
.attach-row .thumb.pdf{display:grid;place-items:center;font-size:.5rem;background:rgba(192,138,78,.2);color:var(--sand-100)}
.attach-row .nm{max-inline-size:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-row button{inline-size:24px;block-size:24px;border-radius:4px;color:var(--sand-400);display:grid;place-items:center}
.attach-row button:hover{color:var(--sand-100);background:rgba(246,238,225,.08)}

.composer{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
  grid-template-areas:"sel sel sel sel" "field attach voice send";
  gap:var(--s-2);align-items:end;
  padding:var(--s-3);border-radius:var(--r-l);
  background:rgba(13,9,6,.6);border:1px solid var(--line-1);
}
.composer.drag{border-color:var(--line-3);background:rgba(192,138,78,.09)}
.composer:focus-within{border-color:var(--line-2)}
.composer textarea{
  grid-area:field;min-height:44px;max-height:170px;resize:none;
  padding:var(--s-3) var(--s-3);font-size:1rem;line-height:1.55;color:var(--sand-100);
}
.composer textarea::placeholder{color:var(--sand-400)}
.composer .icon-btn{inline-size:44px;block-size:44px;border-color:transparent}
.composer #btnAttach{grid-area:attach}
.composer .voice-chat-btn{grid-area:voice}
.composer .voice-chat-btn.is-active{color:var(--copper);border-color:var(--line-2);background:rgba(192,138,78,.14)}
.composer .send{
  grid-area:send;inline-size:44px;block-size:44px;border-radius:var(--r-m);display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200) 60%,var(--copper-soft));
  transition:transform var(--fast) var(--ease);
}
.composer .send:hover{transform:translateY(-1px)}
.composer .send:disabled{opacity:.42;cursor:not-allowed;transform:none}
.composer .send svg{inline-size:18px;block-size:18px;fill:none;stroke:#1a120c;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ★ la scelta delle tre intelligenze: il gesto centrale del prodotto */
.model-sel{
  grid-area:sel;position:relative;
  display:flex;gap:var(--s-2);
  min-inline-size:0;max-inline-size:100%;
  padding-block-end:var(--s-3);margin-block-end:var(--s-1);
  border-block-end:1px solid var(--line-1);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
}
.model-sel::-webkit-scrollbar{display:none}
/* il filamento che segue la consegna fra intelligenze */
.model-sel::after{
  content:"";position:absolute;inset-block-end:-1px;block-size:1px;
  inline-size:var(--sel-w,0px);transform:translateX(var(--sel-x,0px));
  background:linear-gradient(90deg,transparent,var(--copper-soft),transparent);
  box-shadow:0 0 8px rgba(192,138,78,.7);
  transition:transform var(--slow) var(--ease),inline-size var(--slow) var(--ease);
}
@media (prefers-reduced-motion:reduce){ .model-sel::after{transition:none} }
.model-sel button{
  flex:1 1 0;min-inline-size:112px;min-height:44px;
  display:grid;gap:2px;justify-items:start;align-content:center;
  padding:var(--s-2) var(--s-4);border-radius:var(--r-m);text-align:start;
  border:1px solid var(--line-1);background:transparent;color:var(--sand-400);
  transition:color var(--mid) var(--ease),border-color var(--mid) var(--ease),background var(--mid) var(--ease);
}
.model-sel button .mn{font:500 .8125rem/1.15 var(--f-ui);letter-spacing:.02em;color:inherit;white-space:nowrap}
.model-sel button .md{font:400 var(--t-micro)/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:inherit;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}
.model-sel button:hover{color:var(--sand-200);border-color:var(--line-2);background:rgba(246,238,225,.04)}
/* stato attivo a pastiglia piena: testo espresso su fondo sabbia — mai sabbia su sabbia */
.model-sel button.on{
  color:#1a120c;border-color:transparent;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.model-sel button.on .md{opacity:.82}
.model-sel button[hidden]{display:none}
/* il nucleo resta il centro: non è una fra tre pari */
.model-sel button[data-m="skilly-core"]{border-color:var(--line-2)}
.model-sel button[data-m="skilly-core"] .mn::after{
  content:"nucleo";margin-inline-start:var(--s-2);
  font:500 .5rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--copper);vertical-align:middle;
}
.model-sel button[data-m="skilly-core"].on .mn::after{color:#5c3f1c}

.composer-meta{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
  font:400 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.1em;color:var(--sand-400)}
.voice-chat-state{color:var(--copper)}

/* ------------------------- LA FORGIA (pannello) ------------------------- */
.voice-panel .panel-scroll,.voice-panel{overflow-y:auto}
.voice-panel{grid-template-rows:minmax(0,1fr);padding:var(--s-5) var(--s-4) var(--s-10)}
.voice-panel .voice-forge{max-inline-size:1500px;margin-inline:auto}
.forge-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--s-2)}
.forge-tool{
  display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-4);
  border-radius:var(--r-m);border:1px solid var(--line-1);background:rgba(246,238,225,.022);
  text-align:start;transition:border-color var(--mid) var(--ease),background var(--mid) var(--ease);
}
.forge-tool:hover{border-color:var(--line-2);background:rgba(246,238,225,.05)}
.forge-tool.on{border-color:var(--line-3);background:rgba(192,138,78,.1)}
.forge-tool i{inline-size:34px;block-size:34px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;
  border:1px solid var(--line-1);background:rgba(192,138,78,.08)}
.forge-tool i svg{inline-size:17px;block-size:17px;fill:none;stroke:var(--copper-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.forge-tool span{display:grid;gap:2px;min-width:0}
.forge-tool b{font:500 .875rem/1.2 var(--f-ui);color:var(--sand-100)}
.forge-tool small{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400)}
.forge-module{display:grid;gap:var(--s-blk)}
.voice-shell{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s-blk);
  padding:clamp(20px,3vw,36px);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.voice-main{display:grid;gap:var(--s-3);justify-items:center;align-content:start;text-align:center}
.voice-orb{
  inline-size:clamp(96px,13vw,148px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:radial-gradient(circle at 36% 30%,rgba(192,138,78,.3),rgba(19,14,9,.9) 70%);
  scale:var(--voice-scale,1);transition:scale 120ms linear;
}
.voice-orb-core{inline-size:38%;aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,var(--sand-100),var(--copper))}
.voice-orb[data-state="ascolto"]{border-color:var(--copper)}
.voice-orb[data-state="parlato"]{border-color:var(--sand-200)}
.voice-state{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.voice-hint{max-inline-size:44ch;font-size:.8125rem;line-height:1.6;color:var(--sand-400)}
.voice-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center}
.voice-start,.voice-stop{min-height:44px;padding:0 var(--s-6);border-radius:999px;
  font:500 var(--t-small)/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.voice-start{color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
.voice-start.is-active{color:var(--sand-100);background:rgba(192,138,78,.18);border:1px solid var(--line-2)}
.voice-stop{color:var(--sand-200);border:1px solid var(--line-2)}
.voice-stop:disabled,.voice-start:disabled{opacity:.42;cursor:not-allowed}
.voice-quota{font:400 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.1em;color:var(--sand-400);max-inline-size:44ch}
.voice-side{display:grid;gap:var(--s-3);align-content:start;min-width:0}
.voice-side h4{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400)}
.voice-log{max-block-size:280px;overflow-y:auto;display:grid;gap:var(--s-3);
  padding:var(--s-4);border-radius:var(--r-m);border:1px solid var(--line-1);background:rgba(13,9,6,.5)}
.voice-line{font-size:.875rem;line-height:1.6;color:var(--sand-300)}
.voice-line b{display:block;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);margin-block-end:var(--s-1)}
.voice-keyboard{display:none;gap:var(--s-2);grid-template-columns:minmax(0,1fr) auto}
.voice-keyboard.on{display:grid}
.voice-keyboard input{min-height:44px;padding-inline:var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(13,9,6,.5);color:var(--sand-100)}
.voice-keyboard button{min-height:44px;padding:0 var(--s-5);border-radius:var(--r-m);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
.voice-disclosure{font-size:.75rem;line-height:1.6;color:var(--sand-400)}
.forge-native{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--s-blk);
  padding:clamp(20px,3vw,36px);border-radius:var(--r-l);border:1px solid var(--line-1);background:rgba(246,238,225,.022);
}
.forge-native-copy{display:grid;gap:var(--s-3);align-content:start}
.forge-native-k{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-400)}
.forge-native h4{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.forge-native h4 em{font-style:italic;color:var(--copper-soft)}
.forge-native p{font-size:.875rem;line-height:1.65;color:var(--sand-300)}
.forge-native-owner{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
.forge-native-console{display:grid;gap:var(--s-3);align-content:start}
.forge-native-console label{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-400);
  display:block;margin-block-end:var(--s-2)}
.forge-native-console textarea{inline-size:100%;min-height:110px;resize:vertical;padding:var(--s-3);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(13,9,6,.5);color:var(--sand-300);font-size:1rem}
.forge-native-status{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between}
.forge-native-status span{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400)}
.forge-native-status button{min-height:44px;padding:0 var(--s-5);border-radius:999px;border:1px dashed var(--line-2);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400);cursor:not-allowed}

/* -------------------------- CREA · campi comuni ------------------------ */
.crea-pane{display:grid;gap:var(--s-blk);max-inline-size:1500px;margin-inline:auto}
.crea-pane[hidden]{display:none}
.f-field{display:grid;gap:var(--s-2);min-width:0}
.f-field>label,.f-field .lbl{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sand-400)}
.f-field input[type=text],.f-field input[type=number],.f-field input[type=email],
.f-field input[type=password],.f-field select,.f-field textarea{
  inline-size:100%;min-height:44px;padding:var(--s-3) var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(13,9,6,.5);color:var(--sand-100);font-size:1rem;
  transition:border-color var(--fast) var(--ease);
}
.f-field textarea{min-height:96px;resize:vertical;line-height:1.6}
.f-field :is(input,select,textarea):focus{border-color:var(--line-3)}
.f-field select option{background:var(--ink-600);color:var(--sand-100)}
.f-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--s-3)}
.f-inline{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.f-check,.switch{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
  font-size:.875rem;color:var(--sand-300);cursor:pointer}
.f-check input,.switch input{inline-size:18px;block-size:18px;accent-color:var(--copper)}
.seed-row{display:flex;gap:var(--s-2);align-items:center}
.seed-row button{inline-size:44px;block-size:44px;border-radius:var(--r-m);border:1px solid var(--line-1);
  color:var(--sand-200);display:grid;place-items:center;font-size:1rem;flex:none}
.seed-row button:hover{border-color:var(--line-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips button{min-height:40px;padding:0 var(--s-4);border-radius:999px;
  font:400 .8125rem/1 var(--f-ui);color:var(--sand-400);border:1px solid var(--line-1)}
.chips button:hover{color:var(--sand-200);border-color:var(--line-2)}
.chips button.on{color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200));border-color:transparent}
.grow{flex:1;min-width:0}
input[type=range]{accent-color:var(--copper);min-height:44px}
input[type=color]{inline-size:44px;block-size:44px;border:0;background:none;padding:0;cursor:pointer}

.out-zone{min-block-size:120px;border-radius:var(--r-l);border:1px solid var(--line-1);background:rgba(13,9,6,.4);overflow:hidden}
.out-inner{padding:var(--s-5);display:grid;gap:var(--s-4)}
.studio-load{display:grid;gap:var(--s-3);justify-items:center;padding:var(--s-10) var(--s-4);text-align:center}
.spin,.cr-orbit i{inline-size:34px;block-size:34px;border-radius:50%;border:1px solid transparent;
  border-block-start-color:var(--copper);animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation:none;border-color:var(--line-2)} }
.sl-label{font-size:.875rem;color:var(--sand-400)}
.holo{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line-1);background:rgba(13,9,6,.5);
  min-block-size:180px;display:grid}
.holo[hidden]{display:none}
.holo-grid{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:linear-gradient(to right,var(--line-1) 1px,transparent 1px) 0 0/32px 100%,
             linear-gradient(to bottom,var(--line-1) 1px,transparent 1px) 0 0/100% 32px}
.holo-scan{position:absolute;inset-inline:0;block-size:2px;background:linear-gradient(90deg,transparent,var(--copper),transparent);
  opacity:.5;animation:scan 4.2s var(--ease) infinite}
@keyframes scan{0%{inset-block-start:0}50%{inset-block-start:100%}100%{inset-block-start:0}}
@media (prefers-reduced-motion:reduce){ .holo-scan{animation:none;inset-block-start:50%} }
.holo-subject{position:relative;z-index:2;display:grid;place-items:center;padding:var(--s-5);min-height:0}
.holo-subject img{max-inline-size:100%;border-radius:var(--r-m)}
.holo-err{padding:var(--s-6);font-size:.875rem;line-height:1.6;color:#e8c4b4;text-align:center}
.export-panel{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-m);border:1px solid var(--line-1);background:rgba(246,238,225,.022)}
.export-panel[hidden]{display:none}
.export-panel h5{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sand-400)}
.fmt-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.fmt{display:grid;gap:2px;min-height:44px;padding:var(--s-2) var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);color:var(--sand-300);text-align:start}
.fmt:hover{border-color:var(--line-2);color:var(--sand-100);text-decoration:none}
.fmt b{font:500 .75rem/1 var(--f-mono);letter-spacing:.1em;color:var(--sand-100)}
.fmt span{font:400 var(--t-micro)/1.3 var(--f-mono);color:var(--sand-400)}
.out-3d-stage,.ld-3d-stage{min-block-size:300px;inline-size:100%}
.ld-3d-hint,.plate{font:400 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.14em;color:var(--sand-400)}
.meshy-tex-panel{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-m);border:1px solid var(--line-1)}
.meshy-tex-panel h5{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sand-400)}
.meshy-tex-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.meshy-only[hidden]{display:none}

/* --- ComfyUI (offline) --- */
.comfy-offline{display:grid;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-m);
  border:1px dashed var(--line-2);background:rgba(192,138,78,.06)}
.comfy-offline strong{color:var(--sand-100);font-weight:500}
.ig-wrap{position:relative;overflow:auto;max-block-size:min(60vh,620px);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:rgba(13,9,6,.55);cursor:grab}
.ig-wrap.grabbing{cursor:grabbing}
.ig-wrap.is-offline{opacity:.5}
.ig{position:relative;inline-size:1560px;block-size:920px}
.ig-wires{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}
.ig-wires path{fill:none;stroke-width:1.6;opacity:.7}
.ignode{position:absolute;inline-size:214px;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line-2);background:rgba(19,14,9,.94);box-shadow:var(--sh-2)}
.ignode.acc{border-color:var(--copper)}
.igh{padding:var(--s-2) var(--s-3);font:500 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.08em;color:var(--sand-100);
  border-block-end:1px solid var(--line-1);cursor:grab;display:flex;justify-content:space-between;gap:var(--s-2)}
.igbody{padding:var(--s-2) var(--s-3) var(--s-3);display:grid;gap:var(--s-2)}
.igrow{display:flex;align-items:center;gap:var(--s-2);font:400 var(--t-micro)/1.4 var(--f-mono);color:var(--sand-400)}
.igrow.out{justify-content:flex-end}
.igport{inline-size:9px;block-size:9px;border-radius:50%;flex:none}
.igfield{display:grid;gap:4px}
.igfield label{font:400 .5625rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400)}
.igfield input,.igfield select,.igfield textarea{inline-size:100%;min-height:30px;padding:4px var(--s-2);border-radius:5px;
  border:1px solid var(--line-1);background:rgba(13,9,6,.6);color:var(--sand-200);font:400 .6875rem/1.4 var(--f-mono)}
.igfield textarea{min-height:52px;resize:vertical}
.ignum{display:flex;gap:2px}
.ignum button{inline-size:24px;block-size:30px;border:1px solid var(--line-1);border-radius:5px;color:var(--sand-300);font-size:.75rem}

/* --- Immagini Pro --- */
.ip-provider-tabs,.ip-model-catalog{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ip-provider-tabs button{min-height:40px;padding:0 var(--s-4);border-radius:999px;border:1px solid var(--line-1);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400)}
.ip-provider-tabs button.on{color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200));border-color:transparent}
.ip-model-catalog button{display:grid;gap:2px;min-height:56px;padding:var(--s-2) var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);color:var(--sand-300);text-align:start}
.ip-model-catalog button b{font:500 .8125rem/1.2 var(--f-ui);color:var(--sand-100)}
.ip-model-catalog button span{font:400 var(--t-micro)/1.3 var(--f-mono);color:var(--sand-400)}
.ip-model-catalog button.on{border-color:var(--line-3);background:rgba(192,138,78,.12)}
.ip-model-catalog button:disabled{opacity:.4;cursor:not-allowed}
.ip-model-catalog button[hidden]{display:none}
.ip-provider-state{display:inline-flex;align-items:center;gap:var(--s-2);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400)}
.ip-provider-state i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--sand-400)}
.ip-provider-state.ready i{background:#8fbf9a}
.ip-provider-state.error i{background:#c98f7a}
.ip-model-spec{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:baseline;
  padding:var(--s-4);border-radius:var(--r-m);border:1px solid var(--line-1);background:rgba(246,238,225,.022)}
.ip-model-spec span:first-child{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;color:var(--copper)}
.ip-model-spec b{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.ip-model-spec em{font-style:normal;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.12em;color:var(--sand-400)}
.ip-upload[hidden],.ip-character[hidden],.f-two[hidden]{display:none}
.ip-drop,.tex-drop{
  display:grid;gap:var(--s-2);justify-items:center;padding:var(--s-8) var(--s-4);text-align:center;
  border-radius:var(--r-m);border:1px dashed var(--line-2);background:rgba(13,9,6,.4);cursor:pointer;
  font-size:.875rem;color:var(--sand-400);min-height:44px;
}
.ip-drop.drag,.tex-drop.drag{border-color:var(--copper);background:rgba(192,138,78,.1)}
.ip-drop svg,.tex-drop svg{inline-size:24px;block-size:24px;fill:none;stroke:var(--copper-soft);stroke-width:1.4}
.ip-history,.ip-chat-log{display:grid;gap:var(--s-3)}
.ip-thumb{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s-3);align-items:start}
.ip-bubble{padding:var(--s-3) var(--s-4);border-radius:var(--r-m);border:1px solid var(--line-1);background:rgba(246,238,225,.03)}
.ip-bubble b{display:block;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-block-end:var(--s-1)}
.ip-bubble p{font-size:.875rem;line-height:1.6;color:var(--sand-300)}
.ip-bubble.bot{background:rgba(13,9,6,.5)}

/* --- Web Studio --- */
.web-section-head{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:end;justify-content:space-between;
  padding-block-end:var(--s-4);border-block-end:1px solid var(--line-1)}
.web-section-head h4{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.web-template-grid,.web-project-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--s-3)}
.web-template,.web-project-card{position:relative;display:grid;gap:var(--s-2);min-height:44px;padding:var(--s-4);
  border-radius:var(--r-m);border:1px solid var(--line-1);text-align:start;color:var(--sand-300)}
.web-template:hover,.web-project-card:hover{border-color:var(--line-2)}
.web-template.on,.web-project-card.on{border-color:var(--line-3);background:rgba(192,138,78,.1)}
.web-template b,.web-project-card b{font:500 .875rem/1.25 var(--f-ui);color:var(--sand-100)}
.web-template span,.web-project-card span{font:400 var(--t-micro)/1.4 var(--f-mono);color:var(--sand-400)}
.web-project-delete{position:absolute;inset-block-start:var(--s-2);inset-inline-end:var(--s-2);
  inline-size:28px;block-size:28px;border-radius:var(--r-s);display:grid;place-items:center;color:var(--sand-400);cursor:pointer}
.web-project-delete:hover{color:var(--sand-100);background:rgba(246,238,225,.08)}
.web-library-empty{font-size:.875rem;color:var(--sand-400)}
.web-workspace{display:grid;gap:var(--s-4)}
.web-workspace[hidden]{display:none}
.web-state{display:inline-flex;align-items:center;gap:var(--s-2);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400)}
.web-state i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--copper)}
.web-pane-label{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-400);
  padding-block-end:var(--s-2)}
.web-device-switch{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line-1)}
.web-device-switch button{min-height:32px;padding:0 var(--s-3);border-radius:999px;
  font:500 .5625rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400)}
.web-device-switch button.on{color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
#webCodeEditor{inline-size:100%;min-block-size:min(48vh,440px);resize:vertical;padding:var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(13,9,6,.6);color:var(--sand-200);
  font:400 .75rem/1.7 var(--f-mono);white-space:pre;overflow:auto}
.web-preview-frame{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-1);background:#fff;
  margin-inline:auto;inline-size:100%;transition:inline-size var(--slow) var(--ease)}
.web-preview-frame[data-device="tablet"]{inline-size:min(100%,834px)}
.web-preview-frame[data-device="mobile"]{inline-size:min(100%,414px)}
.web-preview-frame iframe{inline-size:100%;block-size:min(56vh,540px);border:0;display:block}

/* --- Texture Lab --- */
.tex-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s-blk);align-items:start}
.tex-controls{display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tex-stage{display:grid;gap:var(--s-4);min-width:0}
.tex-preview-shell{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:var(--glass)}
.tex-preview-shell[hidden]{display:none}
.tex-toolrow{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.tex-view{aspect-ratio:1;border-radius:var(--r-m);border:1px solid var(--line-1);background:rgba(13,9,6,.6);
  background-repeat:repeat;background-position:center}
.tex-view.empty{display:grid;place-items:center;padding:var(--s-8);text-align:center;
  font-size:.875rem;line-height:1.7;color:var(--sand-400);background-image:none}

/* --- La Tela --- */
#panelBoard{grid-template-rows:auto minmax(0,1fr)}
.board-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);border-block-end:1px solid var(--line-1);background:rgba(19,14,9,.5)}
.tool{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-radius:var(--r-m);
  font:400 .8125rem/1 var(--f-ui);color:var(--sand-300);border:1px solid var(--line-1)}
.tool:hover{color:var(--sand-100);border-color:var(--line-2)}
.tool.on{color:var(--copper-soft);border-color:var(--line-3);background:rgba(192,138,78,.12)}
.tool svg{inline-size:15px;block-size:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool.primary{margin-inline-start:auto;color:#1a120c;border-color:transparent;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
.board-palette{display:flex;align-items:center;gap:var(--s-2);padding-inline:var(--s-2)}
.pal-lbl{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--sand-400)}
.pal-row{display:flex;gap:5px}
.swatch,.bgsw{inline-size:24px;block-size:24px;border-radius:7px;border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.swatch.on,.bgsw.on{outline:2px solid var(--sand-200);outline-offset:2px}
.pal-picker{position:relative;inline-size:32px;block-size:32px;display:grid;place-items:center;cursor:pointer}
.pal-picker input[type=color]{position:absolute;inset:0;opacity:0;inline-size:100%;block-size:100%;cursor:pointer}
.pal-picker-ui{font-size:1rem;color:var(--sand-300)}
.pal-hex{inline-size:9ch;min-height:36px;padding-inline:var(--s-2);border-radius:var(--r-s);
  border:1px solid var(--line-1);background:rgba(13,9,6,.6);color:var(--sand-200);
  font:400 .75rem/1 var(--f-mono);text-transform:uppercase}
.board-hint{flex-basis:100%;font:400 var(--t-micro)/1.5 var(--f-mono);letter-spacing:.1em;color:var(--sand-400)}
.board-wrap{position:relative;overflow:auto;min-height:0;background:
  radial-gradient(var(--line-1) 1px,transparent 1px) 0 0/26px 26px}
.board{position:relative;inline-size:2000px;block-size:1400px}
#linkSvg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}
#linkSvg path{fill:none;stroke:var(--line-3);stroke-width:2;pointer-events:stroke;cursor:pointer}
#linkSvg path.sel{stroke:var(--copper-soft);stroke-width:2.6}
#linkSvg path.temp{stroke:var(--sand-200);stroke-dasharray:4 4}
.bnode{position:absolute;min-inline-size:150px;max-inline-size:236px;padding:var(--s-3) var(--s-5);
  border-radius:var(--r-m);cursor:grab;user-select:none;color:#1a120c;
  font:400 .8125rem/1.5 var(--f-ui);border:1px solid rgba(0,0,0,.24);
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.4)}
.bnode.bnode-dark{color:#f6eee1}
.bnode:active{cursor:grabbing}
.bnode.sel{outline:2px solid var(--copper-soft);outline-offset:2px}
.bnode.link-src{outline:2px dashed var(--sand-200);outline-offset:2px}
.bnode .txt{outline:none;min-block-size:16px;overflow-wrap:break-word}
.bnode .txt:empty::before{content:"Blocco…";opacity:.5}
.bnode .port{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:14px;block-size:14px;border-radius:50%;
  background:var(--ink-900);border:2px solid var(--sand-200);cursor:crosshair}
.bnode .port.in{inset-inline-start:-8px}
.bnode .port.out{inset-inline-end:-8px}
.bnode .port.hot,.bnode .port:hover{background:var(--copper)}
.board-empty{position:absolute;inset-block-start:var(--s-16);inset-inline:0;display:grid;justify-items:center;gap:var(--s-3);
  text-align:center;padding:var(--s-6);pointer-events:none}
.board-empty svg{inline-size:44px;block-size:44px}
.board-empty b{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.board-empty p{max-inline-size:44ch;font-size:.875rem;line-height:1.6;color:var(--sand-400)}
.board-info{position:absolute;inset-block-end:var(--s-4);inset-inline-end:var(--s-4);z-index:5;
  inline-size:min(340px,calc(100% - 32px));display:grid;gap:var(--s-2);
  padding:var(--s-5);border-radius:var(--r-l);
  background:var(--glass-deep);border:1px solid var(--line-1);box-shadow:var(--sh-3);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-size:.8125rem;line-height:1.6;color:var(--sand-300)}
.board-info.hidden{display:none}
.board-info h4{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100);padding-inline-end:var(--s-8)}
.board-info ol{display:grid;gap:var(--s-2);padding-inline-start:var(--s-5);list-style:decimal}
.board-info strong{color:var(--sand-100);font-weight:500}
.bi-close{position:absolute;inset-block-start:var(--s-2);inset-inline-end:var(--s-2);
  inline-size:36px;block-size:36px;border-radius:var(--r-s);display:grid;place-items:center;
  border:1px solid var(--line-1);color:var(--sand-300);font-size:1rem}
.bi-close:hover{color:var(--sand-100);border-color:var(--line-2)}
.bi-foot{font:400 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.1em;color:var(--sand-400)}

/* --- Libreria --- */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:var(--s-3)}
.lib-item{position:relative;display:grid;gap:0;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line-1);background:rgba(246,238,225,.022);text-align:start;
  transition:transform var(--mid) var(--ease),border-color var(--mid) var(--ease)}
.lib-item:hover{transform:translateY(-2px);border-color:var(--line-2)}
.thumb{aspect-ratio:1;display:grid;place-items:center;background:rgba(13,9,6,.6);overflow:hidden;position:relative}
.thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.thumb svg{inline-size:34px;block-size:34px;fill:none;stroke:var(--copper-soft);stroke-width:1.3}
.thumb-ph{display:grid;place-items:center}
.thumb-badge{position:absolute;inset-block-start:var(--s-2);inset-inline-start:var(--s-2);
  font:500 .5rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-100);
  padding:4px var(--s-2);border-radius:999px;background:rgba(13,9,6,.7)}
.orbit{position:relative;inline-size:30px;block-size:30px}
.orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid transparent;border-block-start-color:var(--copper);
  animation:spin 1.3s linear infinite}
.orbit i:nth-child(2){inset:6px;animation-duration:1.9s;animation-direction:reverse}
.orbit i:nth-child(3){inset:12px;animation-duration:2.6s}
.lib-item .cap{display:grid;gap:2px;padding:var(--s-3)}
.lib-item .cap b{font:500 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.lib-item .cap span{font-size:.75rem;line-height:1.5;color:var(--sand-400);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-del{position:absolute;inset-block-start:var(--s-2);inset-inline-end:var(--s-2);
  inline-size:30px;block-size:30px;border-radius:var(--r-s);display:grid;place-items:center;cursor:pointer;
  color:var(--sand-200);background:rgba(13,9,6,.7);opacity:0;transition:opacity var(--fast) var(--ease)}
.lib-item:hover .lib-del,.lib-item:focus-within .lib-del{opacity:1}
.lib-del svg{inline-size:13px;block-size:13px;fill:none;stroke:currentColor;stroke-width:1.8}
}

/* =========================== 6 · SOVRAPPOSIZIONI ========================= */
@layer overlays{

/* --- dialoghi --- */
dialog{border:0;padding:0;background:none;max-inline-size:none;max-block-size:none}
dialog:not([open]){display:none}
dialog::backdrop{background:rgba(13,9,6,.72);backdrop-filter:blur(6px)}
.lib-detail,.ext-pop{
  position:fixed;inset:0;margin:auto;inline-size:min(760px,94vw);max-block-size:88dvh;
  border-radius:var(--r-l);overflow:auto;
  background:var(--glass-deep);border:1px solid var(--line-1);box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  color:var(--sand-300);
}
.ext-pop{inline-size:min(420px,92vw);padding:var(--s-6);display:grid;gap:var(--s-4);block-size:max-content;max-block-size:80dvh}
.ext-pop h5{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.exts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.exts button{min-height:44px;padding:0 var(--s-4);border-radius:var(--r-m);border:1px solid var(--line-1);
  font:400 .8125rem/1 var(--f-mono);color:var(--sand-200)}
.exts button:hover{border-color:var(--line-2);color:var(--sand-100)}
.ld-inner{padding:var(--s-6);display:grid;gap:var(--s-4)}
.ld-head{display:flex;gap:var(--s-4);align-items:start;justify-content:space-between}
.ld-head h4{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.ld-close{inline-size:44px;block-size:44px;border-radius:var(--r-m);display:grid;place-items:center;flex:none;
  border:1px solid var(--line-1);color:var(--sand-300)}
.ld-close svg{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:1.8}

/* --- pannello account --- */
#accLayer{
  position:fixed;inset:0;z-index:1100;display:none;place-items:center;padding:var(--s-5);
  background:rgba(13,9,6,.66);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);
}
#accLayer.on{display:grid}
.acc-card{
  position:relative;inline-size:min(440px,94vw);max-block-size:90dvh;overflow-y:auto;
  padding:clamp(22px,4vw,32px);border-radius:var(--r-l);
  background:var(--glass-deep);border:1px solid var(--line-1);box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  color:var(--sand-300);
}
.acc-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:12%;block-size:1px;
  background:linear-gradient(90deg,transparent,var(--copper) 35%,var(--sand-200) 50%,var(--copper) 65%,transparent);
}
.acc-k{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--copper)}
.acc-card h3{font:400 var(--t-dsp-2) var(--f-dsp);color:var(--sand-100);margin-block:var(--s-2) var(--s-1)}
.acc-sub{font-size:.8125rem;line-height:1.6;color:var(--sand-400);margin-block-end:var(--s-4)}
.acc-sub b{color:var(--sand-100);font-weight:500}
.acc-x{position:absolute;inset-block-start:var(--s-3);inset-inline-end:var(--s-3);
  inline-size:38px;block-size:38px;border-radius:var(--r-m);display:grid;place-items:center;
  border:1px solid var(--line-1);color:var(--sand-300);font-size:1rem}
.acc-x:hover{color:var(--sand-100);border-color:var(--line-2)}
.acc-f{margin-block-end:var(--s-3)}
.acc-f label{display:block;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--sand-400);margin-block-end:var(--s-2)}
.acc-f input{inline-size:100%;min-height:48px;padding:var(--s-3) var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(13,9,6,.6);color:var(--sand-100);font-size:16px}
.acc-f input:focus{border-color:var(--line-3)}
.acc-err{display:none;margin-block:var(--s-2);font-size:.8125rem;line-height:1.5;color:#e8c4b4}
.acc-err.on{display:block}
.acc-cta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-start:var(--s-4)}
.acc-solid{flex:1;min-inline-size:180px;min-height:48px;padding:0 var(--s-5);border-radius:999px;
  font:500 var(--t-small)/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#1a120c;
  background:linear-gradient(158deg,var(--sand-100),var(--sand-200) 60%,var(--copper-soft))}
.acc-ghost{min-height:48px;padding:0 var(--s-5);border-radius:999px;border:1px solid var(--line-2);
  font:500 var(--t-micro)/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-200)}
.acc-ghost:hover,.acc-solid:hover{filter:brightness(1.06)}
.acc-state{display:none;margin-block-end:var(--s-4);padding:var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(192,138,78,.06)}
.acc-state.on{display:block}
.acc-state b{color:var(--sand-100);font-weight:500}
.acc-row{display:flex;justify-content:space-between;gap:var(--s-3);padding-block:3px;font-size:.8125rem;color:var(--sand-400)}
.acc-row .v{font:400 .75rem/1.6 var(--f-mono);color:var(--sand-100)}
.acc-note{margin-block-start:var(--s-4);font-size:.6875rem;line-height:1.7;color:var(--sand-400)}
.acc-note b{color:var(--sand-100);font-weight:500}

/* --- La Città: strato del mondo --- */
.world-layer{
  position:fixed;inset:0;z-index:1000;background:var(--ink-900);
  opacity:0;transition:opacity var(--slow) var(--ease);
}
.world-layer[hidden]{display:none}
.world-layer.ready{opacity:1}
.world-layer iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
.world-exit{
  position:absolute;z-index:2;
  inset-block-start:calc(var(--s-4) + env(safe-area-inset-top,0px));
  inset-inline-start:var(--s-4);
  min-height:44px;padding:0 var(--s-5);border-radius:999px;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-100);
  background:rgba(13,9,6,.78);border:1px solid var(--line-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.world-exit:hover{border-color:var(--line-3);background:rgba(192,138,78,.22)}
.world-gate{
  position:fixed;inset:0;z-index:1010;display:grid;place-items:center;gap:var(--s-4);
  background:var(--ink-900);opacity:0;visibility:hidden;
  transition:opacity var(--mid) var(--ease),visibility var(--mid);
}
.world-gate.on{opacity:1;visibility:visible}
.world-gate .ring{inline-size:44px;block-size:44px;border-radius:50%;border:1px solid transparent;
  border-block-start-color:var(--copper);animation:spin 1.1s linear infinite}
.world-gate .lbl{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.34em;text-transform:uppercase;color:var(--sand-400)}
@media (prefers-reduced-motion:reduce){ .world-gate .ring{animation:none} }

/* --- avvisi --- */
.toasts{
  position:fixed;inset-inline:0;z-index:1300;
  inset-block-end:calc(var(--s-6) + env(safe-area-inset-bottom,0px));
  display:grid;justify-items:center;gap:var(--s-2);pointer-events:none;padding-inline:var(--s-4);
}
.toast{
  max-inline-size:min(52ch,90vw);padding:var(--s-3) var(--s-5);border-radius:999px;text-align:center;
  font-size:.875rem;color:var(--sand-100);
  background:var(--glass-deep);border:1px solid var(--line-1);box-shadow:var(--sh-3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;translate:0 10px;transition:opacity var(--mid) var(--ease),translate var(--mid) var(--ease);
}
.toast.in{opacity:1;translate:0 0}
}

/* ============================= 7 · RESPONSIVE ============================ */
@layer responsive{

@media (max-width:1180px){
  .sec-head{grid-template-columns:1fr;gap:var(--s-5)}
  .sec-num{display:flex;align-items:baseline;gap:var(--s-3)}
  .sec-num::before{display:none}
  .sec-num b{font-size:2rem}
  .opus,.opus.alt{grid-template-columns:1fr}
  .opus.alt>.opus-copy{order:0}
  .opus.alt>.plate-wrap{order:0}
  .ledger2>div{grid-template-columns:1fr;gap:var(--s-3)}
  .tex-layout{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}

@media (max-width:980px){
  .hdr-mid{display:none}
  .ws-body{grid-template-columns:1fr}
  .ws-side{
    position:absolute;inset-block:0;inset-inline-start:0;z-index:6;
    inline-size:min(300px,86vw);
    translate:-102% 0;transition:translate var(--mid) var(--ease);
    background:var(--ink-800);box-shadow:var(--sh-3);
  }
  .ws.side-open .ws-side{translate:0 0}
  .ws.side-hidden .ws-side{visibility:visible;padding:initial;border-inline-end:1px solid var(--line-1)}
  .stage{min-block-size:auto;padding-block:calc(120px + env(safe-area-inset-top,0px)) var(--s-12)}
  #glCore,.stage-fallback{inline-size:100%;inset-inline-end:-20vw;opacity:.3}
  #glCore.on{opacity:.3}
  .stage-grid>div{padding-inline-start:0!important}
  .stage-tele{gap:var(--s-4)}
  .ws-tabs{justify-content:flex-start}
}

@media (max-width:760px){
  :root{--glass-blur:16px}
  .hdr{padding-inline:var(--s-3);gap:var(--s-2)}
  .hdr-logo i{display:none}
  .snd-btn{display:none}
  .foot-top{grid-template-columns:1fr;gap:var(--s-6)}
  /* la guida ridotta non deve occupare la larghezza dello schermo:
     da chiusa è una pastiglia, e solo la pastiglia intercetta i tocchi */
  .sk-guide{inset-inline-start:var(--s-3);max-inline-size:calc(100vw - 24px)}
  .sk-guide.is-min{inline-size:auto;max-inline-size:max-content}
  .term-chips button{flex:1 1 100%}
  .opus-facts>div{grid-template-columns:1fr;gap:var(--s-2)}
  .ws-brand-label{display:none}
  .chat-id span{display:none}
  .chat-status span{display:none}
  .msg{max-inline-size:94%}
  .model-sel button{min-inline-size:132px;flex:0 0 auto}
  .composer{grid-template-areas:"sel sel sel sel" "field field field field" "attach voice . send";
    grid-template-columns:auto auto minmax(0,1fr) auto}
  .composer textarea{grid-area:field}
  .board-info{inline-size:calc(100% - 24px);inset-inline:var(--s-3)}
  .voice-log{max-block-size:220px}
}

@media (max-width:420px){
  .hdr{padding-inline:var(--s-3);gap:var(--s-1)}
  .hdr .btn-solid .lbl-full{display:none}
  .hdr .btn-solid .lbl-short{display:inline}
  .hdr .btn-solid{padding:0 var(--s-4)}
  .acc-chip{padding:0 var(--s-3);font-size:.625rem;letter-spacing:.1em}
  .hdr-logo .mark{inline-size:24px;block-size:24px}
  .hdr-logo b{font-size:.625rem;letter-spacing:.16em}
  .stage-top{gap:var(--s-2);font-size:.625rem}
  .sec{padding-block:var(--s-16)}
}

/* ===================== 7b · TELEFONO: LO STUDIO ======================== */
/* Non un adattamento: una disposizione pensata per il pollice.            */
@media (max-width:760px){

  /* --- barra alta: solo l'essenziale, tab sulla stessa riga --- */
  .ws-top{padding:var(--s-2) var(--s-3);padding-block-start:calc(var(--s-2) + env(safe-area-inset-top,0px));
    gap:var(--s-2);flex-wrap:nowrap}
  .ws-top .left{gap:var(--s-1)}
  .ws-top .brand{display:none}
  .ws-tabs{padding-block-start:0;margin-block-start:0;border-block-start:0;
    -webkit-overflow-scrolling:touch;touch-action:pan-x}
  .ws-tabs button{padding:0 var(--s-3);font-size:.8125rem}
  .ws-top .icon-btn{inline-size:44px;block-size:44px}

  /* --- barra laterale a scomparsa: sopra tutto, con velo --- */
  .ws-side{z-index:20;inline-size:min(310px,88vw);box-shadow:var(--sh-3)}
  .ws.side-open .ws-main::before{
    content:"";position:absolute;inset:0;z-index:15;
    background:rgba(13,9,6,.62);backdrop-filter:blur(3px);
  }

  /* --- chat: l'intestazione si assottiglia, il registro respira --- */
  .chat-head{min-height:46px;padding:var(--s-2) var(--s-3)}
  .ai-seal{inline-size:30px;block-size:30px}
  .ws-log{padding:var(--s-4) var(--s-3);gap:var(--s-3)}
  .msg{padding:var(--s-3) var(--s-4);font-size:.9375rem}
  .ws-hello{padding-block:var(--s-4)}
  .ws-hello .ai-seal{inline-size:42px;block-size:42px}

  /* --- composer: il selettore diventa una riga a scorrimento compatta --- */
  .ws-composer{padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom,0px))}
  .composer{padding:var(--s-2);gap:var(--s-1)}
  .model-sel{gap:var(--s-1);padding-block-end:var(--s-2);margin-block-end:0;
    -webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-snap-type:x mandatory}
  .model-sel button{min-inline-size:auto;flex:0 0 auto;scroll-snap-align:start;
    min-height:38px;padding:var(--s-1) var(--s-3);gap:0}
  .model-sel button .mn{font-size:.75rem}
  .model-sel button .md{display:none}          /* il dominio vive nella scheda, non qui */
  .model-sel button[data-m="skilly-core"] .mn::after{margin-inline-start:var(--s-1);font-size:.4375rem}
  .composer textarea{min-height:44px;max-height:96px;padding:var(--s-2)}
  .composer-meta{display:none}                 /* i contatori non valgono 20 px di schermo */
  .attach-row .nm{max-inline-size:12ch}

  /* --- pannelli: un respiro più stretto, campi a piena riga --- */
  .panel-bar{padding:var(--s-2) var(--s-3);gap:var(--s-2)}
  .panel-scroll{padding:var(--s-4) var(--s-3) var(--s-16)}
  .voice-panel{padding:var(--s-4) var(--s-3) var(--s-16)}
  .f-two{grid-template-columns:1fr}
  .seg{inline-size:100%;overflow-x:auto;flex-wrap:nowrap;touch-action:pan-x}
  .seg button{flex:0 0 auto}
  .crea-pane,.forge-module{gap:var(--s-6)}
  .voice-shell,.forge-native,.tex-controls,.tex-preview-shell{padding:var(--s-4)}
  .gen-btn{inline-size:100%;justify-content:center}

  /* --- La Tela: barra compatta a due righe, non 214 px di comandi --- */
  .board-bar{padding:var(--s-2) var(--s-3);gap:var(--s-1);
    flex-wrap:nowrap;overflow-x:auto;touch-action:pan-x;scrollbar-width:none}
  .board-bar::-webkit-scrollbar{display:none}
  .tool{flex:0 0 auto;min-inline-size:44px;justify-content:center;padding:0 var(--s-2);gap:var(--s-1)}
  .tool .tool-t{display:none}                  /* icone sole: la barra sta in una riga */
  .tool.primary{margin-inline-start:var(--s-2);padding:0 var(--s-4)}
  .tool.primary .tool-t{display:inline}        /* tranne "Invia": deve dire cosa fa */
  .board-palette{flex:0 0 auto;padding-inline:var(--s-1)}
  .pal-lbl{display:none}
  .board-hint{display:none}
  .swatch,.bgsw{inline-size:28px;block-size:28px}
  .board-info{inset-block-end:var(--s-3);inline-size:calc(100% - 24px);max-block-size:52dvh;overflow-y:auto;
    padding:var(--s-4)}
  .board-empty{inset-block-start:var(--s-10);padding:var(--s-4)}
  .bnode{min-inline-size:132px;max-inline-size:200px}
  .bnode .port{inline-size:20px;block-size:20px}   /* bersaglio da dito sui collegamenti */
  .bnode .port.in{inset-inline-start:-11px}
  .bnode .port.out{inset-inline-end:-11px}

  /* --- Libreria e Web Studio --- */
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:var(--s-2)}
  .lib-del{opacity:1}                          /* niente hover sul telefono */
  .row-act{opacity:1}
  .web-template-grid,.web-project-list{grid-template-columns:1fr}
  #webCodeEditor{min-block-size:44dvh;font-size:.6875rem}
  .web-preview-frame iframe{block-size:48dvh}
  .ip-model-catalog{flex-direction:column}
  .ip-model-catalog button{inline-size:100%}
  .ld-inner{padding:var(--s-4)}
  .lib-detail,.ext-pop{inline-size:calc(100vw - 24px);max-block-size:86dvh}
  .acc-card{padding:var(--s-5)}
}

/* schermi molto stretti: lo Studio resta usabile a 320 px */
@media (max-width:380px){
  .ws-top .icon-btn+.icon-btn{display:none}    /* un solo comando a sinistra */
  .ws-tabs button{padding:0 var(--s-2);font-size:.75rem}
  .msg{max-inline-size:97%}
  .composer .icon-btn{inline-size:40px;block-size:40px}
  .tool{padding:0 var(--s-2)}
}

/* telefono in orizzontale: poca altezza, va recuperata tutta */
@media (max-height:520px) and (orientation:landscape){
  .ws-top{padding-block:var(--s-1)}
  .chat-head{display:none}
  .ws-log{padding-block:var(--s-3)}
  .model-sel{display:none}                     /* si sceglie dalla scheda, non qui */
  .board-info{max-block-size:70dvh}
}

/* ------------------------------- STAMPA ---------------------------------- */
@media print{
  .hdr,#navMenu,.sk-guide,#skIntro,.ws,.ws-shield,#accLayer,.dl-toast,.toasts,
  .world-layer,.world-gate,#secBlock,#glCore,.stage-fallback{display:none!important}
  body{background:#fff;color:#1a120c}
  body::before{display:none}
  .dsp,.dsp-2,.dsp-3,.opus-t,.wordmark{color:#1a120c}
  .lede,.prose,p,li{color:#33261a}
  .glass,.tile,.term,.plate-wrap.code,.offer,.tier,.sentinel-demo,.city,.dl-card{
    background:#fff;border-color:#c9bda9;box-shadow:none;backdrop-filter:none}
}
}


/* ===================== 8 · MUSICA (sezione nascosta) ===================== */
@layer page{
#musica .wrap{display:grid;gap:var(--s-blk)}
.mx-player{display:grid;gap:var(--s-6);padding:clamp(20px,3vw,32px);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:var(--glass)}
.mx-deck{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3.5vw,34px)}
.mx-disc{inline-size:clamp(96px,14vw,138px);aspect-ratio:1;border-radius:50%;position:relative;flex:none;
  display:grid;place-items:center;border:1px solid var(--line-2);
  background:radial-gradient(circle at 34% 30%,var(--ink-500),var(--ink-900) 68%);box-shadow:var(--sh-2)}
.mx-disc.spin{animation:mxSpin 5.5s linear infinite}
@keyframes mxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mx-disc.spin{animation:none}}
.mx-groove{position:absolute;inset:12%;border-radius:50%;border:1px solid var(--line-1)}
.mx-groove.g2{inset:22%}.mx-groove.g3{inset:32%}
.mx-hub{inline-size:40%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:radial-gradient(circle at 34% 30%,rgba(192,138,78,.5),var(--ink-800))}
.mx-hub svg{inline-size:52%;block-size:52%}
.mx-now{flex:1;min-inline-size:min(260px,100%);display:grid;gap:var(--s-2)}
.mx-k{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--copper)}
.mx-now h3{font:400 var(--t-dsp-2) var(--f-dsp);color:var(--sand-100)}
.mx-bar{position:relative;block-size:24px;display:flex;align-items:center;cursor:pointer}
.mx-bar::before{content:"";position:absolute;inset-inline:0;block-size:3px;border-radius:3px;background:var(--line-1)}
.mx-fill{position:absolute;inset-inline-start:0;block-size:3px;border-radius:3px;inline-size:0%;
  background:linear-gradient(90deg,var(--copper),var(--sand-200))}
.mx-knob{position:absolute;inset-inline-start:0;translate:-50% 0;inline-size:13px;block-size:13px;border-radius:50%;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200));pointer-events:none;box-shadow:var(--sh-1)}
.mx-time{display:flex;justify-content:space-between;font:400 var(--t-micro)/1 var(--f-mono);color:var(--sand-400)}
.mx-ctrl{display:flex;align-items:center;gap:var(--s-3)}
.mx-play{inline-size:56px;block-size:56px;border-radius:50%;display:grid;place-items:center;flex:none;color:#1a120c;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200) 60%,var(--copper-soft))}
.mx-play svg{inline-size:24px;block-size:24px;fill:currentColor}
.mx-play .i-pause{display:none}
.mx-player.playing .mx-play .i-play{display:none}
.mx-player.playing .mx-play .i-pause{display:block}
.mx-skip{inline-size:44px;block-size:44px;border-radius:var(--r-m);display:grid;place-items:center;
  border:1px solid var(--line-1);color:var(--sand-400)}
.mx-skip:hover{color:var(--sand-100);border-color:var(--line-2)}
.mx-skip svg{inline-size:17px;block-size:17px;fill:currentColor}
.mx-list{display:grid;gap:2px;padding-block-start:var(--s-2);border-block-start:1px solid var(--line-1)}
.mx-list button{display:flex;align-items:center;gap:var(--s-3);inline-size:100%;min-height:48px;
  padding:0 var(--s-3);border-radius:var(--r-m);text-align:start;font-size:.9375rem;color:var(--sand-400)}
.mx-list button:hover{background:rgba(246,238,225,.05);color:var(--sand-100)}
.mx-list li.on button{background:rgba(192,138,78,.12);color:var(--sand-100)}
.mx-list .n{font:400 var(--t-micro)/1 var(--f-mono);color:var(--sand-400);flex:none}
.mx-list li.on .n{color:var(--copper)}
.mx-list .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-list .off{font:500 .5rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:#1a120c;flex:none;
  padding:5px var(--s-2);border-radius:999px;background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
.mx-list .d{font:400 var(--t-micro)/1 var(--f-mono);color:var(--sand-400);flex:none;min-inline-size:38px;text-align:end}
.mx-list .eq{display:none;align-items:flex-end;gap:2.5px;block-size:14px;flex:none}
.mx-list li.on.playing .eq{display:flex}
.mx-list .eq i{inline-size:2.6px;border-radius:2px;background:var(--copper);animation:mxEq 1s var(--ease) infinite}
.mx-list .eq i:nth-child(1){block-size:60%}
.mx-list .eq i:nth-child(2){block-size:100%;animation-delay:.18s}
.mx-list .eq i:nth-child(3){block-size:45%;animation-delay:.34s}
.mx-list .eq i:nth-child(4){block-size:80%;animation-delay:.5s}
@keyframes mxEq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.mx-list .eq i{animation:none}}
.mx-links{display:flex;flex-wrap:wrap;gap:var(--s-2);padding-block-start:var(--s-4);border-block-start:1px solid var(--line-1)}
.mx-pill{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-radius:999px;
  font-size:.8125rem;color:var(--sand-200);border:1px solid var(--line-1);background:rgba(246,238,225,.03)}
.mx-pill:hover{border-color:var(--line-3);background:rgba(192,138,78,.1);text-decoration:none}
.mx-pill svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--copper);stroke-width:1.7;flex:none}
.mx-pill em{font-style:normal;color:var(--copper);font-size:.6875rem}
.mx-note{font-size:.8125rem;line-height:1.7;color:var(--sand-400)}
.mx-video{display:grid;gap:var(--s-4);padding:clamp(18px,3vw,28px);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:var(--glass)}
.mx-vhead{display:grid;gap:var(--s-2);max-inline-size:640px}
.mx-vframe{position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;cursor:pointer;
  border:1px solid var(--line-1);background:var(--ink-800)}
.mx-vframe img{inline-size:100%;block-size:100%;object-fit:cover}
.mx-vframe iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
.mx-vplay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(13,9,6,.34)}
.mx-vplay svg{inline-size:64px;block-size:64px;padding:18px;box-sizing:content-box;border-radius:50%;fill:#1a120c;
  background:linear-gradient(150deg,var(--sand-100),var(--sand-200))}
}

/* ===== 11 · PANNELLI CREA E WEB STUDIO ==================================
   Queste classi vivono nel markup dello Studio e nella prima stesura della
   v11 erano rimaste SENZA ALCUNA REGOLA: le schede andavano in colonna
   singola e le immagini dei template uscivano a dimensione naturale.
   ========================================================================= */
@layer studio{

/* --- intestazione di pannello --- */
.imgpro-hero,.web-lab-hero{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-5);
  padding:clamp(20px,2.6vw,32px);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.imgpro-hero>div:first-child,.web-lab-hero>div:not([class]){display:grid;gap:var(--s-2);min-inline-size:0;max-inline-size:74ch}
.imgpro-hero .tag,.web-lab-kicker{
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--copper);
}
.imgpro-hero h3,.web-lab-hero h3{font:400 var(--t-dsp-2) var(--f-dsp);color:var(--sand-100);line-height:1.1}
.imgpro-hero .plate,.web-lab-hero p:not([class]){
  font:400 .875rem/1.65 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--sand-300);
}
.hero-actions,.web-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.web-lab-hero{position:relative;overflow:hidden}
.web-lab-signal{
  position:absolute;inset-block-start:0;inset-inline:14%;block-size:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--copper),transparent);
}
.web-lab-meta{
  display:inline-flex;align-items:center;gap:var(--s-2);flex:none;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-400);
  padding:var(--s-2) var(--s-4);border-radius:999px;border:1px solid var(--line-1);
}
.web-lab-meta i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--copper);flex:none}

/* --- la griglia dei pannelli: due colonne piene su schermo largo --- */
.imgpro-grid{
  display:grid;gap:var(--s-4);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
}
.imgpro-grid>.ip-templates,
.imgpro-grid>.ip-preview-card{grid-column:1/-1}

/* --- la scheda: il contenitore che mancava --- */
.card{
  display:grid;gap:var(--s-4);align-content:start;min-inline-size:0;
  padding:clamp(18px,2.2vw,26px);border-radius:var(--r-l);
  border:1px solid var(--line-1);background:rgba(246,238,225,.022);
}
.card.glass{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
}
.card-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);
  padding-block-end:var(--s-3);border-block-end:1px solid var(--line-1);
}
.card-head>div{display:grid;gap:var(--s-1);min-inline-size:0}
.card-head h4{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100);line-height:1.2}
.card-head .plate{max-inline-size:52ch}

/* --- template pronti: griglia, non colonna --- */
.tpl-grid{
  display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));
}
.tpl-card{
  display:grid;gap:var(--s-2);align-content:start;min-inline-size:0;
  padding:var(--s-3);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(13,9,6,.4);
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease);
}
.tpl-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tpl-thumb{
  aspect-ratio:3/4;border-radius:var(--r-s);overflow:hidden;background:rgba(13,9,6,.7);
}
.tpl-img{
  inline-size:100%;block-size:100%;object-fit:cover;object-position:center 22%;
  display:block;
}
.tpl-img--architecture,.tpl-img--cartoon{object-position:center center}
.tpl-card h5{font:500 .875rem/1.25 var(--f-ui);color:var(--sand-100)}
.tpl-card p{font-size:.75rem;line-height:1.5;color:var(--sand-400)}
.tpl-card .btn-line{justify-self:start;min-height:38px;padding:0 var(--s-4);font-size:var(--t-micro)}

/* --- schede specifiche di Immagini Pro --- */
.ip-mode-card,.ip-model-card,.ip-prompt-card,.ip-chat{min-inline-size:0}
.ip-preview-card{min-block-size:200px}
.ip-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2)}
.ip-chat-compose input{
  min-height:44px;padding:0 var(--s-4);border-radius:var(--r-m);
  border:1px solid var(--line-1);background:rgba(13,9,6,.5);color:var(--sand-100);font-size:1rem;
}
.ip-chat-compose button{
  min-height:44px;padding:0 var(--s-5);border-radius:var(--r-m);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:#1a120c;background:linear-gradient(150deg,var(--sand-100),var(--sand-200));
}
.ip-chat-log{max-block-size:300px;overflow-y:auto}

/* --- utilità che il markup usa --- */
.f-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.pill{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-300);
  padding:var(--s-2) var(--s-3);border-radius:999px;border:1px solid var(--line-1);
}
.note,.ig-hint{font-size:.8125rem;line-height:1.6;color:var(--sand-400);max-inline-size:var(--w-read)}
.link-btn{
  display:inline-flex;align-items:center;min-height:38px;
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-soft);border-block-end:1px solid transparent;
}
.link-btn:hover{color:var(--sand-100);border-block-end-color:var(--line-3)}

/* --- Web Studio --- */
.web-template-shell,.web-brief,.web-library-shell{
  display:grid;gap:var(--s-4);padding:clamp(18px,2.4vw,28px);border-radius:var(--r-l);
  border:1px solid var(--line-1);
}
.web-template-shell.glass,.web-brief.glass,.web-library-shell.glass{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
}
.web-brief-head{display:grid;gap:var(--s-2);padding-block-end:var(--s-3);border-block-end:1px solid var(--line-1)}
.web-brief-head h4{font:400 var(--t-dsp-3) var(--f-dsp);color:var(--sand-100)}
.web-config-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.web-prompt-field{display:grid;gap:var(--s-2)}
.web-workspace-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding-block-end:var(--s-3);border-block-end:1px solid var(--line-1);
}
.web-workspace-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));align-items:start}
.web-code-panel,.web-preview-panel{display:grid;gap:var(--s-2);min-inline-size:0}

/* --- telefono --- */
@media (max-width:760px){
  .imgpro-hero,.web-lab-hero{padding:var(--s-4);gap:var(--s-3);align-items:start}
  .imgpro-hero h3,.web-lab-hero h3{font-size:1.375rem}
  .hero-actions,.web-actions{inline-size:100%}
  .hero-actions .btn-line,.web-actions .btn-line{flex:1 1 auto;justify-content:center}
  .web-lab-meta{inline-size:100%;justify-content:center}
  .imgpro-grid{grid-template-columns:1fr;gap:var(--s-3)}
  .card{padding:var(--s-4);gap:var(--s-3)}
  .card-head{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
  .tpl-card{padding:var(--s-2)}
  .tpl-card h5{font-size:.8125rem}
  .tpl-card p{font-size:.6875rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tpl-card .btn-line{inline-size:100%;justify-content:center;min-height:40px}
  .ip-chat-log{max-block-size:220px}
  .web-config-grid,.web-workspace-grid,.f-grid{grid-template-columns:1fr}
}
@media (max-width:380px){
  .tpl-grid{grid-template-columns:1fr}
}
}

/* ===== 9 · VERNICE DI FONDO — FUORI DA OGNI @layer ======================
   Nella cascata CSS una regola senza layer batte SEMPRE una regola dentro un
   @layer, a prescindere da specificità e ordine. Tutto il resto di questo
   foglio vive in @layer: basta un foglio non-layered iniettato da un'anteprima,
   da un'estensione del browser o da terze parti — «html,body{background:
   transparent}» — per lasciare la pagina bianca.
   Queste due righe sono l'unica difesa: stanno fuori da ogni layer e in coda al
   foglio, quindi vincono a parità di condizioni. Non toccare l'ordine.
   ========================================================================= */
html{background:#0d0906}
body{background:var(--ink-900,#0d0906)}

/* ===== 10 · CINTURA DI SICUREZZA — FUORI DA OGNI @layer =================
   Le regole qui sotto non dipendono da nessuna media query e non possono
   essere battute da un foglio di terze parti. Servono a garantire che lo
   Studio resti dentro lo schermo anche in condizioni impreviste: browser
   che non applica le query, foglio caricato a metà, viewport anomala.
   Sono l'ultima difesa, non la soluzione: la struttura corretta sta sopra.
   ========================================================================= */
.ws-top,.ws-body,.ws-main,.panel,.chat-head,.ws-log,.ws-composer,
.composer,.model-sel,.panel-bar,.board-bar{max-inline-size:100%}
.ws-log>*{max-inline-size:100%}
.ws-hello{max-inline-size:min(46ch,100%)}
.ws-hello p,.ws-hello h3{max-inline-size:100%;overflow-wrap:break-word}
.msg{max-inline-size:min(78ch,92%);overflow-wrap:anywhere}
.chat-id b,.chat-id span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- lo Studio non può diventare trasparente ---------------------------
   Il fondo è ripetuto con un colore LETTERALE come fallback del token: se
   una variabile non risolvesse (foglio caricato a metà, cache mista), il
   pannello resterebbe trasparente e si vedrebbe la home sotto — è il difetto
   che l'utente ha visto. Lo schermo di sicurezza si accende dalla classe sul
   body, senza dipendere dal JavaScript che gli mette .on. */
.ws{background:var(--ink-900,#0d0906)}
.ws-shield{background:var(--ink-900,#0d0906)}
body.ws-open .ws-shield,body.city-open .ws-shield{display:block}
body.ws-open>.hdr,body.ws-open>#navMenu,body.ws-open>main,body.ws-open>.foot,
body.ws-open>#skIntro,body.city-open>.hdr,body.city-open>#navMenu,
body.city-open>main,body.city-open>.foot,body.city-open>#skIntro{display:none}
.world-layer{background:var(--ink-900,#0d0906)}