body { margin: 0; background: #eee; 
  font-family: 'JetBrains Mono', 'Fira Code', 'segoe UI';
  font-size: 0.9em;
}

/* Box rigido: l'atomo dei WKBook */
.wkb-slide { 
 width: 1000px; height: 590px; 
 background: #fff; margin: 20px auto; 
 border: 2px solid #000; position: relative; 
  overflow: hidden; 
}

header { 
 position: absolute; top: 0; left: 0; width: 100%; height: 50px; 
 background: #800000; color: #fff; line-height: 50px; padding: 0 20px; box-sizing: border-box; 
}

footer { 
 position: absolute; bottom: 0; left: 15px; width: 32%; height: 48px; 
 border-top: 1px solid #ccc; display: flex; align-items: center; justify-content: left; gap: 20px; 
}

.theory { 
  position: absolute; top: 50px; left: 0; width: 350px; height: 552px; 
  padding: 25px; border-right: 1px solid #ccc; box-sizing: border-box; overflow-y: auto; 
}

.visual { 
  position: absolute; top: 50px; left: 350px; width: 650px; height: 552px; 
  padding: 15px; box-sizing: border-box; background: #fcfcfc; 
}

#jxgbox { width: 100%; height: 95%; border: 1px solid #ccc; background: #fff; }

.btn { padding: 5px 20px; border: 1px solid #800000; text-decoration: none; color: #800000; font-weight: bold; font-size: 12px; 
}

.btn:hover { background: #800000; color: #fff; 
}

.nota {
  font-family: "Segoe UI Symbol", "Segoe UI", Inconsolata;
  font-size: 1.2em;
  display: block;
  margin: 1em 0;
  padding: 10px 10px 10px 10px;
  border-left: 10px solid #37BC7D;
  border-color: #37BC7D;
  background-color: #ECFCCA;
  border-style: dotted;
  border-radius: 0 4px 4px 0;
}

.nota p {
    margin: 0;
}

.notabene{
  font-family: "Segoe UI Symbol", "Segoe UI", Inconsolata;
  display: block;
  margin: 1em 0;
  padding: 10px 10px 10px 10px;
  color: black;
  padding: 10px;
  border-left:10px solid #800000;
  line-height:1.6;
  position: relative;
  background:#fff933;
}

.notabene p {
    margin: 0;
}