/* ============================================================================
   NEURONI DI SILICIO — sistema visivo "quaderno scientifico editoriale"
   Carta calda, inchiostro, carta millimetrata nei margini, due voci.
   Anna (filosofa)  → ametista / terracotta   ·  Ivan (tecnico) → teal blueprint
   Tema chiaro per la lettura · tema "Laboratorio" (scuro) per le esperienze.
   Nessun framework, nessun build: solo CSS + variabili.
   ============================================================================ */

:root{
  /* ---- carta e inchiostro ---- */
  --paper:      #f5f1e6;   /* carta calda */
  --paper-2:    #efe9d8;
  --card:       #fffdf6;   /* foglio bianco-panna */
  --card-2:     #f7f2e4;
  --ink:        #1c1b18;   /* inchiostro quasi nero */
  --ink-2:      #3a382f;
  --ink-soft:   #6f6a5a;   /* grigio-talpa per testi secondari */
  --line:       #d8cfb6;   /* righe sottili calde */
  --line-2:     #e7dfc8;
  --grid:       rgba(60,120,128,.07); /* carta millimetrata */

  /* ---- accenti: le due voci ---- */
  --ivan:       #0e7d8c;   /* teal "blueprint" — il tecnico */
  --ivan-deep:  #0a5660;
  --ivan-tint:  #e2f0f1;
  --anna:       #b1452a;   /* terracotta — la filosofa */
  --anna-deep:  #7e2f1c;
  --anna-tint:  #f6e6dc;
  --plum:       #6c4a7e;   /* ametista — filosofia / spunti */
  --plum-tint:  #ece2f0;
  --gold:       #c08a1e;   /* oro — curiosità / storia */
  --gold-tint:  #f4e8c8;

  /* ---- semantica ---- */
  --warn:       #b3791a;
  --danger:     #b1452a;
  --ok:         #2f7d5b;
  --ok-tint:    #dcefe4;

  /* ---- ombre & raggi ---- */
  --sh-1: 0 1px 2px rgba(40,32,18,.06), 0 2px 8px rgba(40,32,18,.05);
  --sh-2: 0 6px 22px rgba(40,32,18,.10);
  --sh-3: 0 18px 50px rgba(40,32,18,.16);
  --r:    14px;
  --r-lg: 22px;
  --r-sm: 8px;

  /* ---- font ---- */
  --f-disp: "Bricolage Grotesque", "Trebuchet MS", sans-serif; /* titoli, display */
  --f-read: "Spectral", Georgia, "Times New Roman", serif;     /* lettura lunga */
  --f-ui:   "Bricolage Grotesque", system-ui, sans-serif;      /* interfaccia */
  --f-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --measure: 68ch;        /* larghezza ottimale di lettura */
  --topbar-h: 60px;
}

/* tema Laboratorio (scuro): si attiva sui contenitori .lab */
.lab{
  --paper:#0f1418; --paper-2:#0b0f12; --card:#161d22; --card-2:#10161a;
  --ink:#eef3f2; --ink-2:#d6dedd; --ink-soft:#90a0a2; --line:#26343a; --line-2:#1c282d;
  --grid:rgba(120,220,235,.06);
  --ivan:#37d0e0; --ivan-deep:#7fe7f2; --ivan-tint:#10303a;
  --anna:#ff9f6e; --anna-deep:#ffc4a3; --anna-tint:#3a241a;
  --plum:#c79be0; --gold:#ecc35a;
}

/* ----------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; min-width:0; }
html{ height:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ max-width:100%; overflow-x:hidden; }
body{
  min-height:100%;
  font-family:var(--f-read);
  font-size:18px; line-height:1.62;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"liga" 1,"kern" 1,"onum" 1;
}
img,svg,canvas,video{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; }
a{ color:var(--ivan-deep); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--ivan); }
:focus-visible{ outline:3px solid var(--ivan); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--gold-tint); }

/* ---- atmosfera: carta millimetrata + grana ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/26px 26px,
    radial-gradient(130% 90% at 50% -20%, rgba(255,247,224,.7), rgba(255,247,224,0) 60%),
    linear-gradient(168deg, var(--paper) 0%, var(--paper-2) 70%, #e7dec5 100%);
}
.lab body::before, body.is-lab::before{ }
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
  mix-blend-mode:multiply;
}

/* ----------------------------------------------------------- layout base */
#app{ position:relative; }
.view{ display:none; }
.view.active{ display:block; animation:rise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.measure{ max-width:var(--measure); margin-inline:auto; }
.tcenter{ text-align:center; }

/* tipografia di base */
h1,h2,h3,h4,h5{ font-family:var(--f-disp); font-weight:800; line-height:1.06; letter-spacing:-.012em; color:var(--ink); }
p{ margin:0 0 1em; }
strong,b{ font-weight:600; }
em,i{ font-style:italic; }
.read p{ hyphens:auto; }
small{ font-size:.82em; }
sup{ font-size:.68em; line-height:0; }

/* etichette monospaziate (numeri, sigle, "data") */
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.kicker{ font-family:var(--f-ui); font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; font-size:12.5px; color:var(--ivan-deep); }

/* ============================================================ TOPBAR */
.topbar{
  position:sticky; top:0; z-index:60; height:var(--topbar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 20px; background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px) saturate(1.2); border-bottom:1px solid var(--line);
}
.topbar .brand{ display:flex; align-items:center; gap:11px; font-family:var(--f-disp);
  font-weight:800; letter-spacing:-.01em; color:var(--ink); text-decoration:none; font-size:18px; }
.topbar .glyph{ width:30px; height:30px; flex:0 0 auto; }
.topbar .spacer{ flex:1; }
.topbar .pageprog{ position:absolute; left:0; bottom:-1px; height:2px; background:var(--ivan); width:0; transition:width .1s linear; }
.navlink{ font-family:var(--f-ui); font-weight:600; font-size:14.5px; color:var(--ink-2);
  text-decoration:none; padding:7px 11px; border-radius:999px; }
.navlink:hover{ background:var(--card); color:var(--ink); }
.navlink.cta{ background:var(--ink); color:var(--paper); }
.navlink.cta:hover{ background:var(--ivan-deep); color:#fff; }

/* ============================================================ BOTTONI */
.btn{
  font-family:var(--f-ui); font-weight:700; font-size:16px;
  display:inline-flex; align-items:center; gap:.5em; max-width:100%;
  padding:.62em 1.15em; border-radius:999px;
  background:var(--ink); color:var(--paper); border:1.5px solid var(--ink);
  box-shadow:var(--sh-1); transition:transform .14s, box-shadow .14s, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); }
.btn.ivan{ background:var(--ivan); border-color:var(--ivan); color:#fff; }
.btn.ivan:hover{ background:var(--ivan-deep); }
.btn.anna{ background:var(--anna); border-color:var(--anna); color:#fff; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ background:var(--card); border-color:var(--ink-soft); }
.btn.small{ font-size:14px; padding:.46em .9em; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ============================================================ COPERTINA / HOME */
#view-home.active{ display:block; }
.cover{ position:relative; min-height:calc(100vh - 0px); display:grid;
  grid-template-rows:auto 1fr auto; padding:18px 0 0; overflow:hidden; }
.cover-top{ display:flex; align-items:center; justify-content:space-between; padding:8px 26px 0; }
.cover-stage{ display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:center;
  max-width:1180px; margin:0 auto; width:100%; padding:18px 26px; }
.cover-collana{ font-family:var(--f-ui); font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:13px; color:var(--anna-deep); margin-bottom:18px; }
.cover h1{ font-size:clamp(46px, 8.4vw, 104px); line-height:.92; letter-spacing:-.03em; }
.cover h1 .si{ color:var(--ivan-deep); }
.cover .sub{ font-family:var(--f-read); font-style:italic; font-size:clamp(19px,2.6vw,27px);
  color:var(--ink-2); margin-top:18px; max-width:18ch; line-height:1.25; }
.cover .by{ margin-top:26px; font-family:var(--f-ui); font-weight:600; color:var(--ink-soft); font-size:15.5px; }
.cover .by b{ color:var(--ink); font-weight:700; }
.cover-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.cover-art{ position:relative; aspect-ratio:1/1.04; border-radius:var(--r-lg);
  background:radial-gradient(120% 120% at 30% 20%, #16323a, #0c1d23 70%);
  box-shadow:var(--sh-3); overflow:hidden; border:1px solid #0a161b; }
.cover-art svg{ width:100%; height:100%; }
.cover-foot{ border-top:1px solid var(--line); margin-top:8px; }
.cover-foot .wrap{ display:flex; flex-wrap:wrap; gap:18px 30px; padding:16px 26px; align-items:center;
  font-family:var(--f-ui); font-size:13.5px; color:var(--ink-soft); }
.cover-foot .law{ display:inline-flex; align-items:center; gap:8px; }
.cover-foot .law b{ color:var(--ink-2); }
.facts{ display:flex; gap:24px; flex-wrap:wrap; margin-top:30px; }
.fact{ }
.fact .n{ font-family:var(--f-disp); font-weight:800; font-size:30px; color:var(--ivan-deep); line-height:1; }
.fact .l{ font-family:var(--f-ui); font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }

/* le due voci, presentazione in copertina */
.voci{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; max-width:560px; }
.voce{ border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--card); box-shadow:var(--sh-1); }
.voce .who{ font-family:var(--f-ui); font-weight:800; display:flex; align-items:center; gap:8px; }
.voce.a .who{ color:var(--anna-deep); } .voce.i .who{ color:var(--ivan-deep); }
.voce .dot{ width:11px; height:11px; border-radius:50%; }
.voce.a .dot{ background:var(--anna); } .voce.i .dot{ background:var(--ivan); }
.voce p{ font-size:14.5px; color:var(--ink-2); margin:6px 0 0; font-family:var(--f-ui); line-height:1.4; }

/* ============================================================ INDICE / SOMMARIO */
.toc-hero{ padding:54px 0 18px; }
.toc-hero h1{ font-size:clamp(34px,6vw,60px); }
.toc-hero p{ max-width:60ch; color:var(--ink-2); margin-top:10px; }
.part{ margin-top:42px; }
.part-head{ display:flex; align-items:baseline; gap:14px; border-bottom:2px solid var(--ink);
  padding-bottom:8px; margin-bottom:6px; }
.part-head .pn{ font-family:var(--f-mono); font-weight:700; color:var(--anna-deep); font-size:14px; letter-spacing:.1em; }
.part-head h2{ font-size:clamp(22px,3.4vw,30px); }
.part-head .pd{ margin-left:auto; font-family:var(--f-read); font-style:italic; color:var(--ink-soft); font-size:15px; }
.toc-list{ display:grid; gap:0; }
.toc-row{ display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:14px;
  padding:14px 8px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
  transition:background .15s, padding .15s; position:relative; }
.toc-row:hover{ background:var(--card); padding-left:16px; }
.toc-row .cn{ font-family:var(--f-mono); font-weight:700; font-size:18px; color:var(--ink-soft); }
.toc-row .ct{ font-family:var(--f-disp); font-weight:700; font-size:19px; }
.toc-row .cv{ font-family:var(--f-ui); font-size:12px; padding:3px 9px; border-radius:999px;
  white-space:nowrap; font-weight:700; }
.cv.anna{ background:var(--anna-tint); color:var(--anna-deep); }
.cv.ivan{ background:var(--ivan-tint); color:var(--ivan-deep); }
.cv.due{ background:linear-gradient(90deg,var(--anna-tint),var(--ivan-tint)); color:var(--ink-2); }
.toc-row .cdesc{ grid-column:2/4; font-family:var(--f-read); color:var(--ink-soft);
  font-size:14.5px; margin-top:2px; }

/* ============================================================ VISTA CAPITOLO */
.chap-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.chap-hero .inner{ max-width:1180px; margin:0 auto; padding:46px 24px 34px; position:relative; z-index:2; }
.chap-hero .crumbs{ font-family:var(--f-ui); font-size:13.5px; color:var(--ink-soft); display:flex; gap:9px; align-items:center; }
.chap-hero .crumbs a{ color:var(--ink-soft); text-decoration:none; }
.chap-hero .crumbs a:hover{ color:var(--ink); }
.chap-hero .cnum{ font-family:var(--f-mono); font-weight:700; color:var(--anna-deep); letter-spacing:.12em; margin:18px 0 6px; font-size:15px; }
.chap-hero h1{ font-size:clamp(32px,6vw,58px); max-width:18ch; }
.chap-hero .abs{ font-family:var(--f-read); font-style:italic; font-size:clamp(17px,2.3vw,21px);
  color:var(--ink-2); max-width:54ch; margin-top:16px; line-height:1.45; }
.chap-hero .leadby{ margin-top:22px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-ui); font-weight:600; font-size:14px; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line); padding:7px 14px; border-radius:999px; }
.chap-hero .leadby .dot{ width:10px; height:10px; border-radius:50%; }
.chap-hero.v-anna{ background:linear-gradient(180deg,var(--anna-tint),transparent 75%); }
.chap-hero.v-ivan{ background:linear-gradient(180deg,var(--ivan-tint),transparent 75%); }
.chap-hero.v-due{ background:linear-gradient(110deg,var(--anna-tint),transparent 45%,var(--ivan-tint)); }
.chap-hero .heroglyph{ position:absolute; right:-30px; top:-20px; width:340px; height:340px; opacity:.5; z-index:1; pointer-events:none; }

/* progressione di lettura nel capitolo */
.chap-layout{ display:grid; grid-template-columns:1fr; }

/* corpo di lettura */
.read{ font-family:var(--f-read); font-size:19px; line-height:1.72; color:var(--ink-2); }
.read .measure > *{ }
.read h2{ font-family:var(--f-disp); font-size:clamp(24px,3.6vw,33px); margin:1.7em 0 .5em;
  letter-spacing:-.015em; color:var(--ink); scroll-margin-top:80px; }
.read h2 .sec-no{ font-family:var(--f-mono); font-size:.5em; color:var(--anna-deep); vertical-align:middle; margin-right:.6em; font-weight:700; }
.read h3{ font-family:var(--f-disp); font-size:clamp(19px,2.6vw,23px); margin:1.5em 0 .35em; color:var(--ink); scroll-margin-top:80px; }
.read h4{ font-family:var(--f-ui); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.07em; color:var(--ivan-deep); margin:1.4em 0 .3em; }
.read p{ margin:0 0 1.05em; }
.read p a{ font-weight:500; }
.read ul,.read ol{ margin:0 0 1.1em 1.3em; }
.read li{ margin:.34em 0; }
.read ul.clean{ list-style:none; margin-left:0; }
.read ul.clean li{ padding-left:1.5em; position:relative; }
.read ul.clean li::before{ content:"▸"; position:absolute; left:0; color:var(--ivan); }
.read hr{ border:none; border-top:1px solid var(--line); margin:2.2em auto; max-width:200px; }

/* capolettera all'inizio del capitolo */
.read .lead::first-letter{
  font-family:var(--f-disp); font-weight:800; float:left; font-size:4.2em; line-height:.78;
  padding:.04em .12em 0 0; color:var(--anna-deep);
}
.read .lead{ font-size:1.04em; }

/* termine chiave inline con definizione al passaggio */
.term{ border-bottom:2px dotted var(--ivan); cursor:help; font-style:normal; }

/* ---- richiami a margine: le due voci ---- */
.note{ border-left:3px solid var(--line); padding:2px 0 2px 16px; margin:1.3em 0; font-family:var(--f-ui);
  font-size:15px; line-height:1.45; color:var(--ink-2); }
.note .tag{ display:block; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.note.anna{ border-color:var(--anna); } .note.anna .tag{ color:var(--anna-deep); }
.note.ivan{ border-color:var(--ivan); } .note.ivan .tag{ color:var(--ivan-deep); }

/* ---- dialogo a due voci ---- */
.dialogo{ margin:1.6em 0; display:grid; gap:10px; }
.battuta{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; }
.battuta .who{ font-family:var(--f-ui); font-weight:800; font-size:13px; text-transform:uppercase;
  letter-spacing:.04em; padding:7px 11px; border-radius:10px; white-space:nowrap; align-self:start; min-width:64px; text-align:center; }
.battuta.anna .who{ background:var(--anna-tint); color:var(--anna-deep); }
.battuta.ivan .who{ background:var(--ivan-tint); color:var(--ivan-deep); }
.battuta .said{ font-family:var(--f-read); font-size:18px; line-height:1.55; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line); border-radius:4px 14px 14px 14px; padding:11px 15px; }
.battuta.ivan .said{ border-radius:14px 4px 14px 14px; }

/* ---- riquadri (box) ---- */
.box{ margin:1.7em 0; border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  box-shadow:var(--sh-1); overflow:hidden; }
.box > .head{ display:flex; align-items:center; gap:10px; padding:11px 18px; font-family:var(--f-ui);
  font-weight:800; font-size:13.5px; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--line); }
.box > .body{ padding:15px 18px; font-family:var(--f-read); font-size:17px; line-height:1.6; color:var(--ink-2); }
.box > .body > *:last-child{ margin-bottom:0; }
.box .icon{ width:22px; height:22px; flex:0 0 auto; }
.box.def .head{ background:var(--ivan-tint); color:var(--ivan-deep); }
.box.def{ border-color:color-mix(in srgb,var(--ivan) 35%, var(--line)); }
.box.curi .head{ background:var(--gold-tint); color:#8a6410; }
.box.attenzione .head{ background:#f6e6cf; color:var(--warn); }
.box.attenzione{ border-color:color-mix(in srgb,var(--warn) 28%, var(--line)); }
.box.pratica .head{ background:var(--ok-tint); color:var(--ok); }
.box.filo .head{ background:var(--plum-tint); color:var(--plum); }
.box.filo{ border-color:color-mix(in srgb,var(--plum) 30%, var(--line)); }
.box.storia .head{ background:var(--gold-tint); color:#8a6410; }
.box.mim .head{ background:#e7eef0; color:var(--ink-2); }

/* ---- citazione / epigrafe ---- */
.epi{ margin:1.4em auto 2em; max-width:60ch; text-align:center; }
.epi .q{ font-family:var(--f-read); font-style:italic; font-size:clamp(19px,2.6vw,25px);
  line-height:1.4; color:var(--ink); }
.epi .src{ font-family:var(--f-ui); font-size:13.5px; color:var(--ink-soft); margin-top:9px; letter-spacing:.02em; }
.epi .src b{ color:var(--anna-deep); font-weight:700; }
.epi::before{ content:"“"; font-family:var(--f-read); font-size:60px; color:var(--line);
  display:block; line-height:.4; margin-bottom:8px; }
blockquote.pull{ margin:1.6em 0; border-left:4px solid var(--anna); padding:4px 0 4px 20px;
  font-family:var(--f-read); font-style:italic; font-size:22px; line-height:1.4; color:var(--ink); }

/* ---- figura / diagramma ---- */
figure.fig{ margin:1.8em 0; }
figure.fig .frame{ border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  padding:14px; box-shadow:var(--sh-1); overflow:hidden; }
figure.fig .frame.dark{ background:radial-gradient(120% 120% at 30% 0%, #15242b,#0c1820); border-color:#0a151b; }
figure.fig img{ width:100%; border-radius:8px; }
figure.fig figcaption{ font-family:var(--f-ui); font-size:13.5px; color:var(--ink-soft);
  margin-top:9px; line-height:1.4; padding-left:2px; }
figure.fig figcaption b{ color:var(--ivan-deep); font-weight:700; }
.figghost{ display:grid; place-items:center; aspect-ratio:16/9; color:var(--ink-soft);
  font-family:var(--f-ui); text-align:center; gap:6px; background:
  repeating-linear-gradient(135deg, var(--card) 0 12px, var(--card-2) 12px 24px); border-radius:8px; }
.figghost .bn{ font-family:var(--f-mono); font-size:12px; opacity:.7; }

/* ---- codice & prompt ---- */
pre.code, .prompt{ font-family:var(--f-mono); font-size:14.5px; line-height:1.55;
  background:#11181d; color:#dbe7e6; border-radius:var(--r); padding:16px 18px; margin:1.5em 0;
  overflow-x:auto; border:1px solid #0a141a; box-shadow:var(--sh-1); }
pre.code .c{ color:#7fae9a; } pre.code .k{ color:#7fd6e0; } pre.code .s{ color:#e0b46b; }
.prompt{ background:#13201f; border-color:#0c1a18; }
.prompt .ptag{ display:inline-block; font-family:var(--f-ui); font-weight:800; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#0b1413; background:var(--gold); padding:3px 9px;
  border-radius:6px; margin-bottom:10px; }
.prompt .ptag.bad{ background:#d98b6e; }
.prompt .puser{ color:#9fe0d6; } .prompt .pnote{ color:#8aa; font-style:italic; }
.codecap{ font-family:var(--f-ui); font-size:13px; color:var(--ink-soft); margin-top:-1em; margin-bottom:1.6em; }

/* tabella */
.tablewrap{ overflow-x:auto; margin:1.6em 0; border:1px solid var(--line); border-radius:var(--r); }
table.data{ width:100%; border-collapse:collapse; font-family:var(--f-ui); font-size:15px; }
table.data th,table.data td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); }
table.data th{ background:var(--card); font-weight:800; color:var(--ink); }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:nth-child(even) td{ background:color-mix(in srgb,var(--card) 55%, transparent); }

/* ---- esperienza interattiva (montata da esperienze.js) ---- */
.exp{ margin:2em 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
  border:1px solid #0a151b; }
.exp .exp-head{ display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:linear-gradient(90deg,#0c1a20,#102a30); color:#dff3f3; }
.exp .exp-head .k{ font-family:var(--f-ui); font-weight:800; letter-spacing:.04em; }
.exp .exp-head .tagx{ margin-left:auto; font-family:var(--f-mono); font-size:11px; color:#6fd6e0;
  border:1px solid #1d4148; padding:3px 8px; border-radius:6px; }
.exp .exp-body{ background:radial-gradient(120% 120% at 20% 0%, #11242b, #0a161c); padding:18px; }
.exp.lab{ }

/* controlli laboratorio */
.lab .ctrl{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin:12px 0; }
.lab .field{ display:flex; flex-direction:column; gap:4px; font-family:var(--f-ui); font-size:12.5px; color:var(--ink-soft); }
.lab label{ font-family:var(--f-ui); font-size:12.5px; color:var(--ink-soft); }
.lab input[type=range]{ -webkit-appearance:none; appearance:none; height:5px; border-radius:5px;
  background:#26343a; outline:none; width:180px; }
.lab input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--ivan); border:2px solid #0a1417; cursor:pointer; box-shadow:0 1px 4px #0008; }
.lab input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--ivan); border:2px solid #0a1417; cursor:pointer; }
.lab .val{ font-family:var(--f-mono); color:var(--ivan-deep); font-weight:700; }
.lab .btn{ background:var(--ivan); border-color:var(--ivan); color:#04171a; }
.lab .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.lab .readout{ font-family:var(--f-mono); font-size:13px; color:var(--ink-2); background:#0c171c;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; line-height:1.5; }
.lab canvas{ width:100%; border-radius:12px; background:#0b1418; border:1px solid #16262d; touch-action:none; }
.lab .hint{ font-family:var(--f-ui); font-size:13.5px; color:#90a0a2; margin:6px 0; }

/* ---- QUIZ di autovalutazione ---- */
.quiz{ margin:1.6em 0; }
.quiz .qitem{ border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  margin-bottom:14px; overflow:hidden; box-shadow:var(--sh-1); }
.quiz .q{ padding:15px 18px; font-family:var(--f-disp); font-weight:700; font-size:18px; display:flex; gap:10px; }
.quiz .q .qn{ font-family:var(--f-mono); color:var(--anna-deep); }
.quiz .opts{ display:grid; gap:8px; padding:0 18px 14px; }
.quiz .opt{ text-align:left; font-family:var(--f-ui); font-size:15.5px; padding:11px 14px;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card-2); transition:all .15s; display:flex; gap:10px; }
.quiz .opt:hover{ border-color:var(--ivan); background:#fff; }
.quiz .opt .lt{ font-family:var(--f-mono); font-weight:700; color:var(--ink-soft); }
.quiz .opt.right{ border-color:var(--ok); background:var(--ok-tint); }
.quiz .opt.wrong{ border-color:var(--danger); background:var(--anna-tint); }
.quiz .opt[disabled]{ cursor:default; }
.quiz .why{ font-family:var(--f-read); font-size:15.5px; color:var(--ink-2); padding:0 18px 15px;
  display:none; }
.quiz .why.show{ display:block; animation:rise .3s both; }
.quiz .why .badge{ font-family:var(--f-ui); font-weight:800; font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; margin-right:8px; }
.quiz .why.ok .badge{ color:var(--ok); } .quiz .why.no .badge{ color:var(--danger); }
.quiz-score{ font-family:var(--f-ui); font-weight:700; text-align:center; padding:14px; color:var(--ink-2);
  background:var(--card); border:1px dashed var(--ink-soft); border-radius:var(--r); margin-top:4px; }

/* ---- domande per pensare ---- */
.think{ margin:1.6em 0; padding:18px 20px; border-radius:var(--r); background:var(--plum-tint);
  border:1px solid color-mix(in srgb,var(--plum) 30%, var(--line)); }
.think .h{ font-family:var(--f-ui); font-weight:800; color:var(--plum); text-transform:uppercase;
  letter-spacing:.07em; font-size:13px; margin-bottom:8px; display:flex; gap:8px; align-items:center; }
.think ol{ margin:0 0 0 1.2em; font-family:var(--f-read); font-size:17px; color:var(--ink-2); }
.think li{ margin:.4em 0; }

/* ---- termini chiave (riepilogo) ---- */
.keyterms{ display:flex; flex-wrap:wrap; gap:8px; margin:1.2em 0; }
.keyterms .kt{ font-family:var(--f-mono); font-size:13px; background:var(--ivan-tint); color:var(--ivan-deep);
  border:1px solid color-mix(in srgb,var(--ivan) 25%, transparent); padding:5px 10px; border-radius:999px; }

/* ---- fonti ---- */
.fonti{ margin:2em 0 0; padding-top:14px; border-top:1px solid var(--line); }
.fonti h4{ font-family:var(--f-ui); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.fonti ol{ margin:.6em 0 0 1.3em; font-family:var(--f-ui); font-size:14px; color:var(--ink-soft); line-height:1.5; }
.fonti li{ margin:.35em 0; }
.fonti a{ word-break:break-word; }

/* ---- navigazione capitolo ---- */
.chapnav{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  margin:3em 0 0; padding:22px 0; border-top:1px solid var(--line); }
.chapnav a{ text-decoration:none; }
.chapnav .prev{ justify-self:start; } .chapnav .next{ justify-self:end; text-align:right; }
.chapnav .nlbl{ font-family:var(--f-ui); font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }
.chapnav .ntit{ font-family:var(--f-disp); font-weight:700; color:var(--ink); }
.chapnav .ntit:hover{ color:var(--ivan-deep); }

/* indice laterale di capitolo (mini-sommario sticky) */
.miniidx{ position:fixed; right:max(16px, calc((100vw - 1180px)/2 - 150px)); top:120px; width:200px; z-index:40;
  font-family:var(--f-ui); font-size:13px; display:none; }
@media(min-width:1320px){ .miniidx{ display:block; } }
.miniidx .t{ font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-size:11px; margin-bottom:8px; }
.miniidx a{ display:block; padding:4px 0 4px 12px; color:var(--ink-soft); text-decoration:none;
  border-left:2px solid var(--line); line-height:1.3; }
.miniidx a:hover{ color:var(--ink); border-color:var(--ivan); }
.miniidx a.on{ color:var(--ivan-deep); border-color:var(--ivan); font-weight:700; }

/* ============================================================ FOOTER */
.foot{ border-top:1px solid var(--line); margin-top:30px; background:var(--card); }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:14px 30px; padding:26px 24px; align-items:center; }
.foot .brand{ font-family:var(--f-disp); font-weight:800; font-size:17px; }
.foot small{ font-family:var(--f-ui); color:var(--ink-soft); font-size:13px; }
.foot .spacer{ flex:1; }

/* ============================================================ UTILITY */
.shake{ animation:shk .4s; } @keyframes shk{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.pop{ animation:pop .3s cubic-bezier(.2,1.4,.4,1) both; } @keyframes pop{ from{transform:scale(.85);opacity:0} to{transform:none;opacity:1} }
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:200; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.stagger > *{ opacity:0; animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards; }
.stagger > *:nth-child(1){ animation-delay:.05s } .stagger > *:nth-child(2){ animation-delay:.13s }
.stagger > *:nth-child(3){ animation-delay:.21s } .stagger > *:nth-child(4){ animation-delay:.29s }
.stagger > *:nth-child(5){ animation-delay:.37s } .stagger > *:nth-child(6){ animation-delay:.45s }

/* ============================================================ RESPONSIVE */
@media (max-width: 880px){
  body{ font-size:17px; }
  .cover-stage{ grid-template-columns:1fr; gap:18px; }
  .cover-art{ order:-1; max-width:360px; }
  .voci{ grid-template-columns:1fr; max-width:none; }
  .read{ font-size:17.5px; }
  .toc-row{ grid-template-columns:40px 1fr; }
  .toc-row .cv{ display:none; }
  .chapnav{ grid-template-columns:1fr; gap:14px; }
  .chapnav .next{ justify-self:start; text-align:left; }
}
@media (max-width: 520px){
  .wrap{ padding:0 16px; }
  .battuta{ grid-template-columns:1fr; gap:5px; }
  .battuta .who{ justify-self:start; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}