/* ============================================================================
   tema.css — la presentazione nello stile dello scrollsite (rimando 7)
   ----------------------------------------------------------------------------
   Token presi da /opt/doc-maint/scrollsite (scrollcraft.css + index.html):
   fondo #000, surface #0F140F, ink #E9EFE9, ink-soft #97A69B, accento #43E08A,
   cyan #5EE7FF, ambra #FFB547, font di sistema + mono di sistema (nessun CDN),
   raggi 6/12/20, ombre tinte sul verde, edge-light in cima alle superfici.
   Contenuti (content/*.md) e funzioni (nav, IT/EN, export, mermaid, video)
   restano quelli di prima: qui c'è solo la pelle.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas:     #000000;
  --sc-surface:    #0F140F;
  --sc-ink:        #E9EFE9;
  --sc-ink-soft:   #97A69B;
  --sc-accent:     #43E08A;
  --sc-accent-ink: #05130B;
  --sc-cyan:       #5EE7FF;
  --sc-amber:      #FFB547;
  --sc-magenta:    #FF5FD2;

  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  --sc-font-display: system-ui, "Segoe UI", "Helvetica Neue", sans-serif;
  --sc-font-text:    system-ui, "Segoe UI", "Helvetica Neue", sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;
  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem;
  --sc-5: 1.5rem;  --sc-6: 2rem;   --sc-7: 3rem;    --sc-8: 4rem;

  --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px;

  --sc-shadow-color: 150 30% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);
  /* il bagliore delle schede console (bordo che prende luce, non alone) */
  --sc-glow: 0 0 0 1px color-mix(in oklab, var(--sc-accent) 14%, transparent),
             0 0 24px -6px color-mix(in oklab, var(--sc-accent) 22%, transparent);

  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sc-d-fast: 160ms; --sc-d-base: 240ms;
  --sc-z-chrome: 60;
  --testa-h: 3.5rem;            /* altezza dell'header: il layout ci misura il padding */

  /* colore della prosa: tra ink e ink-soft, perché qui si legge a lungo */
  --pres-prose: color-mix(in oklab, var(--sc-ink) 74%, var(--sc-ink-soft));

  /* i contenuti (content/*.md) citano --border-strong nel tag <video>: resta vivo */
  --border-strong: var(--sc-hairline-strong);
  --border: var(--sc-hairline);
  --accent: var(--sc-accent);
  --fg-dim: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--sc-canvas); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background:
    radial-gradient(46% 38% at 50% 42%, rgba(67,224,138,0.045), transparent 70%),
    var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
  min-height: 100vh;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-sm); }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}

/* ----------------------------------------------------------- atmosfera -- */
#fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: reduce) { #fondo { display: none; } }

/* ---------------------------------------------------------------- label -- */
.sc-label {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* --------------------------------------------------------------- header --
   Una scheda console distesa: etichette maiuscole spaziate, numeri tabulari,
   bordo sottile, punto di stato. */
header.testa {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-4);
  padding: 0 clamp(1rem, 2.4vw, 1.75rem);
  height: var(--testa-h);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  border-bottom: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-edge);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  font-variant-numeric: tabular-nums;
}
.testa__ritorno {
  color: var(--sc-ink-soft); text-decoration: none; white-space: nowrap;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  padding-right: var(--sc-4); border-right: 1px solid var(--sc-hairline);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.testa__ritorno b { color: var(--sc-accent); font-weight: 600; }
.testa__ritorno:hover { color: var(--sc-ink); }
.testa__titolo { display: flex; align-items: baseline; gap: var(--sc-3); min-width: 0; }
.testa__titolo h1 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.testa__titolo .num { color: var(--sc-accent); font-weight: 600; }
.testa__spazio { flex: 1 1 auto; }
.testa__stato {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--sc-ink-soft); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  white-space: nowrap;
}
.testa__stato::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent);
  box-shadow: 0 0 8px color-mix(in oklab, var(--sc-accent) 70%, transparent);
}
.testa__stato:empty { display: none; }
.testa__azioni { display: flex; gap: var(--sc-2); }

/* pulsanti: maiuscolo mono, bordo sottile, accento solo su hover/attivo */
button.tasto {
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent);
  border: 1px solid var(--sc-hairline); color: var(--sc-ink-soft);
  padding: 0.38rem 0.75rem; border-radius: var(--sc-r-sm); cursor: pointer;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: background var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
button.tasto:hover {
  color: var(--sc-ink); border-color: var(--sc-hairline-strong);
  background: color-mix(in oklab, var(--sc-accent) 8%, transparent);
}
button.tasto:active { color: var(--sc-accent); border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); }
#langToggle::before { content: "lingua · "; color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
#langToggle { color: var(--sc-ink); }

/* --------------------------------------------------------------- layout -- */
.layout {
  position: relative; z-index: 1;
  display: flex; gap: 28px;
  padding: calc(var(--testa-h) + 2rem) 24px 4rem;
  max-width: 1180px; margin: 0 auto;
}
main#sections { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------------------- nav: la scheda --
   Il TOC (costruito da nav.js: .toc-act / .toc-link / .toc-sub) diventa una
   scheda console: testa con numero e stato, righe in mono. */
.rail {
  flex: 0 0 220px; position: sticky; top: 4.75rem; align-self: flex-start;
  max-height: calc(100vh - 6rem); display: flex; flex-direction: column;
  background: color-mix(in oklab, var(--sc-surface) 82%, transparent);
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  font-variant-numeric: tabular-nums;
}
.rail__testa {
  display: flex; align-items: baseline; gap: var(--sc-3);
  padding: var(--sc-3) var(--sc-4) var(--sc-2);
  border-bottom: 1px solid var(--sc-hairline);
  color: var(--sc-ink-soft);
}
.rail__testa .num { color: var(--sc-accent); font-weight: 600; }
.rail__testa .nome { color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm); flex: 1; letter-spacing: 0; }
.rail__testa .stato { text-transform: uppercase; letter-spacing: var(--sc-track-wide); font-size: 0.66rem; white-space: nowrap; }
.rail__testa .stato::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc-accent); margin-right: 0.5em; vertical-align: 1px;
}
.rail__chiudi, .testa__menu, .velo { display: none; }
#toc { overflow-y: auto; padding: var(--sc-2) var(--sc-2) var(--sc-3); overscroll-behavior: contain; }
#toc .toc-act {
  color: var(--sc-ink-soft); text-transform: uppercase;
  font-size: 0.66rem; letter-spacing: var(--sc-track-wide);
  margin: var(--sc-3) var(--sc-2) var(--sc-1);
  padding-top: var(--sc-2); border-top: 1px solid var(--sc-hairline);
  opacity: 0.85;
}
#toc .toc-act:first-child { border-top: 0; padding-top: 0; margin-top: var(--sc-1); }
#toc .toc-link, #toc .toc-sub {
  display: block; text-decoration: none; border-radius: var(--sc-r-sm);
  border-left: 2px solid transparent;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
#toc .toc-link { padding: 3px 8px; color: var(--sc-ink); line-height: 1.5; }
#toc .toc-sub { padding: 2px 8px; color: var(--sc-ink-soft); font-size: 0.7rem; line-height: 1.4; }
#toc .toc-sub-l2 { padding-left: 20px; }
#toc .toc-sub-l3 { padding-left: 32px; opacity: 0.8; }
#toc .toc-link:hover, #toc .toc-sub:hover { color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 7%, transparent); }
/* sezione corrente (scroll-spy di tema.js): bordo acceso, come il nodo hub */
#toc .toc-link.viva { color: var(--sc-accent); border-left-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 6%, transparent); }
#toc .toc-sub.viva { color: var(--sc-ink); border-left-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }

/* ------------------------------------------------- pannello di lettura --
   Larghezza di lettura invariata; carta scura con bordo che prende luce. */
.pres-section {
  position: relative;
  background: color-mix(in oklab, var(--sc-surface) 86%, transparent);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.2rem, 2.8vw, 2.4rem);
  margin-bottom: var(--sc-5);
  box-shadow: var(--sc-e2), var(--sc-edge);
  color: var(--pres-prose);
  scroll-margin-top: 4.5rem;
  transition: box-shadow var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out);
}
.pres-section:target, .pres-section.viva {
  border-color: color-mix(in oklab, var(--sc-accent) 28%, var(--sc-hairline));
  box-shadow: var(--sc-e2), var(--sc-edge), var(--sc-glow);
}
.pres-section h2, .pres-section h3, .pres-section h4 { scroll-margin-top: 4.5rem; }
.pres-section > h2:first-child {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); text-wrap: balance;
  color: var(--sc-ink); margin: 0 0 var(--sc-5);
  padding-bottom: var(--sc-4); border-bottom: 1px solid var(--sc-hairline);
}
.pres-section > h2:first-child::before {
  content: "§"; display: inline-block; margin-right: 0.5em;
  font-family: var(--sc-font-mono); font-weight: 600; font-size: 0.72em;
  color: var(--sc-accent); vertical-align: 0.12em;
}
.pres-section h2:not(:first-child) {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-lg); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); color: var(--sc-ink);
  margin: var(--sc-7) 0 var(--sc-3);
}
.pres-section h3 {
  font-family: var(--sc-font-mono); font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink); margin: var(--sc-6) 0 var(--sc-3);
}
.pres-section h3::before { content: "·"; color: var(--sc-accent); margin-right: 0.5em; }
.pres-section h4 { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-ink); margin: var(--sc-5) 0 var(--sc-2); }
.pres-section p { margin: var(--sc-4) 0; line-height: var(--sc-leading-body); text-wrap: pretty; max-width: 74ch; }
.pres-section > p:first-of-type { max-width: none; }
.pres-section strong, .pres-section b { color: var(--sc-ink); font-weight: 600; }
.pres-section em { color: var(--sc-ink); }
.pres-section a { color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.pres-section a:hover { color: color-mix(in oklab, var(--sc-accent) 80%, white); }
.pres-section ul, .pres-section ol { padding-left: 1.4em; margin: var(--sc-4) 0; max-width: 74ch; }
.pres-section li { margin: var(--sc-1) 0; }
.pres-section li::marker { color: var(--sc-accent); font-family: var(--sc-font-mono); }
.pres-section code {
  font-family: var(--sc-font-mono); font-size: 0.88em;
  color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-ink) 7%, transparent);
  border: 1px solid var(--sc-hairline);
  padding: 0.05em 0.4em; border-radius: 4px;
}
.pres-section pre {
  background: #060907; border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e1), var(--sc-edge);
  padding: var(--sc-4) var(--sc-5); margin: var(--sc-5) 0;
  overflow-x: auto; line-height: 1.6;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.pres-section pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.pres-section blockquote {
  margin: var(--sc-5) 0; padding: var(--sc-2) var(--sc-5);
  border-left: 2px solid var(--sc-accent); color: var(--sc-ink);
  font-size: var(--sc-t-lg); line-height: 1.44; letter-spacing: var(--sc-track-snug); max-width: 60ch;
}
.pres-section blockquote p { margin: var(--sc-2) 0; }
.pres-section hr { border: 0; height: 1px; background: var(--sc-hairline); margin: var(--sc-6) 0; }

/* tabelle: righe a filo sottile, numeri tabulari, testa maiuscola */
.pres-section table {
  width: 100%; border-collapse: collapse; margin: var(--sc-5) 0;
  font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums;
  display: block; overflow-x: auto;
}
.pres-section thead th {
  text-align: left; font-family: var(--sc-font-mono); font-weight: 600;
  font-size: 0.68rem; letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); padding: var(--sc-2) var(--sc-3);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.pres-section td { padding: var(--sc-2) var(--sc-3); border-top: 1px solid var(--sc-hairline); vertical-align: top; }
.pres-section tbody tr:first-child td { border-top: 0; }
.pres-section td:first-child { color: var(--sc-ink); }

/* figure: tavola (plate) come nello scrollsite, didascalia mono */
.pres-section img {
  display: block; width: 100%; height: auto; max-width: 100%;
  margin: var(--sc-5) auto var(--sc-2);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge);
}
.pres-section img + em, .pres-section video + em, .pres-section p > em:only-child {
  display: block; font-style: normal;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); letter-spacing: 0.02em; line-height: 1.5;
  margin: 0 0 var(--sc-5); max-width: none;
}
.pres-section video {
  width: 100%; border-radius: var(--sc-r-md) !important;
  border: 1px solid var(--sc-hairline) !important;
  background: #04070A; box-shadow: var(--sc-e2), var(--sc-edge);
  margin: var(--sc-4) 0 var(--sc-2) !important;
}
.pres-section .mermaid {
  margin: var(--sc-5) 0; padding: var(--sc-4);
  background: #060907; border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e1), var(--sc-edge);
  overflow-x: auto;
}
.pres-section .mermaid svg { margin: 0 auto; max-width: 100%; height: auto; }

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 820px) {
  :root { --testa-h: 3.25rem; }
  /* header: una riga sola, altezza fissa (il padding del layout è misurato su questa) */
  header.testa { gap: var(--sc-2); padding-inline: 0.75rem; height: var(--testa-h, 3.25rem); }
  .testa__ritorno { padding-right: var(--sc-2); border-right: 0; }
  .testa__ritorno span { display: none; }
  .testa__titolo { flex: 1 1 auto; min-width: 0; }
  .testa__titolo h1 { font-size: var(--sc-t-xs); }
  .testa__stato { display: none; }
  .testa__azioni { flex: none; }
  #langToggle::before { content: none; }
  button.tasto { padding: 0.32rem 0.55rem; }
  /* hamburger: tre righe che diventano una × */
  .testa__menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 2.1rem; height: 2.1rem; padding: 0; flex: none;
  }
  .testa__menu span { display: block; width: 16px; height: 1.5px; margin: 0 auto; background: var(--sc-ink);
    transition: transform var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out); }
  .testa__menu[aria-expanded="true"] { border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); }
  .testa__menu[aria-expanded="true"] span { background: var(--sc-accent); }
  .testa__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .testa__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .testa__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .layout { flex-direction: column; gap: 0; padding: calc(var(--testa-h, 3.25rem) + 0.9rem) 0.75rem 2.5rem; }

  /* drawer: la scheda scende da sotto l'header, sopra un velo scuro */
  .velo { display: block; position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 2);
    background: color-mix(in oklab, var(--sc-canvas) 60%, transparent);
    opacity: 0; pointer-events: none; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
  .velo.aperta { opacity: 1; pointer-events: auto; }
  .rail {
    position: fixed; top: calc(var(--testa-h, 3.25rem) + 0.5rem); left: 0.5rem; right: 0.5rem;
    bottom: auto; max-height: calc(100vh - var(--testa-h, 3.25rem) - 1rem);
    max-height: calc(100dvh - var(--testa-h, 3.25rem) - 1rem);
    z-index: calc(var(--sc-z-chrome) - 1); width: auto; flex: none;
    background: color-mix(in oklab, var(--sc-surface) 96%, transparent);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base);
  }
  .rail.aperta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .rail__chiudi {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; margin-left: auto; padding: 0; cursor: pointer;
    background: none; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm);
    color: var(--sc-ink-soft); font-size: 1rem; line-height: 1;
  }
  .rail__testa .stato { display: none; }
  #toc { -webkit-overflow-scrolling: touch; }
  #toc .toc-link { padding: 6px 8px; }
  #toc .toc-sub { padding: 4px 8px; }
  .pres-section { padding: var(--sc-5) var(--sc-4); overflow-wrap: anywhere; }
  .pres-section > h2:first-child { font-size: var(--sc-t-lg); }
  .pres-section pre { padding: var(--sc-3) var(--sc-4); }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  .testa__stato::before { box-shadow: none; }
}

/* Pulsante Showreel in testata: accento della pagina, apre il proiettore condiviso con la radice */
.testa__showreel { display: inline-flex; align-items: center; gap: .45em; border-color: var(--sc-accent); color: var(--sc-accent); white-space: nowrap; }
.testa__showreel:hover, .testa__showreel:focus-visible { background: var(--sc-accent); color: var(--sc-bg, #070a08); }
.testa__showreel-dur { opacity: .7; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .testa__showreel-dur { display: none; } }