:root{
  --bg:#020611;--panel:#07111f;--glass:rgba(5,12,25,.72);--line:rgba(148,163,184,.25);
  --text:#fff;--muted:#dbeafe;--cyan:#22d3ee;--blue:#38bdf8;--orange:#ff9800;--red:#ff5a52;--green:#4ade80;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{min-height:100vh;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 8%,rgba(56,189,248,.16),transparent 30%),radial-gradient(circle at 84% 10%,rgba(255,152,0,.12),transparent 24%),linear-gradient(180deg,#020611,#091121 70%,#050816)}
.megistone-lab{width:1760px;max-width:none;margin:0;padding:24px 0 30px;position:absolute;left:50%;top:0;transform:translateX(-50%) scale(var(--lab-scale,1));transform-origin:top center;transition:transform .16s ease-out}
.hero-panel{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:18px;padding:26px 34px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(8,16,31,.96),rgba(13,26,46,.66));box-shadow:0 28px 95px rgba(0,0,0,.38)}
.eyebrow{display:inline-flex;padding:8px 13px;border-radius:999px;font-weight:900;color:#9beafe;background:linear-gradient(135deg,#075985,#0c4a8a);box-shadow:inset 0 0 0 1px rgba(125,211,252,.3);margin-bottom:18px}
h1{font-size:clamp(3rem,4.6vw,5.4rem);line-height:.96;letter-spacing:-.055em;text-shadow:0 10px 34px rgba(0,0,0,.45)}
.hero-panel p{font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.45;color:#f4f8ff;max-width:900px;margin-top:18px}
.power-btn{border:0;border-radius:22px;padding:24px 34px;min-width:330px;display:flex;align-items:center;justify-content:center;gap:18px;color:white;font-weight:950;font-size:1.55rem;cursor:pointer;background:linear-gradient(135deg,#ff9d1c,#ff4f56);box-shadow:0 26px 70px rgba(255,110,34,.3);transition:.25s transform,.25s box-shadow}
.power-btn:hover{transform:translateY(-2px);box-shadow:0 34px 90px rgba(255,110,34,.42)}.bolt{font-size:2.05rem;filter:drop-shadow(0 0 12px rgba(255,255,255,.8))}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:18px}.scene-card{position:relative;min-height:760px;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#020711;box-shadow:0 35px 120px rgba(0,0,0,.45)}
.visual-stage,.micro-stage{position:absolute;inset:0;transition:opacity .45s,transform .7s;overflow:hidden}.visual-stage{opacity:1;transform:scale(1)}.micro-stage{opacity:0;pointer-events:none;transform:scale(1.08)}.micro-mode .visual-stage{opacity:0;pointer-events:none;transform:scale(1.14)}.micro-mode .micro-stage{opacity:1;pointer-events:auto;transform:scale(1)}
.visual-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s,filter .45s,transform .9s}.closed #openImg{opacity:0}.closed #closedImg{opacity:1}.scene-card:not(.closed) #openImg{opacity:1}.scene-card:not(.closed) #closedImg{opacity:0}#fxCanvas,#microCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.closed .visual-stage img{filter:saturate(1.08) contrast(1.06)}
.state-badge{position:absolute;top:28px;left:34px;display:flex;align-items:flex-start;gap:12px;max-width:380px;padding:14px 16px;border-radius:18px;background:rgba(0,0,0,.18);backdrop-filter:blur(12px)}.state-dot{width:15px;height:15px;border-radius:50%;margin-top:7px;background:var(--red);box-shadow:0 0 24px var(--red)}.state-badge strong{font-size:1.38rem;color:var(--red)}.state-badge p{font-size:1.15rem;line-height:1.45;margin-top:10px;color:white}.closed .state-dot{background:var(--green);box-shadow:0 0 24px var(--green)}.closed .state-badge strong{color:#22ff9a}
.big-state{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-weight:1000;font-size:2.3rem;letter-spacing:.03em;padding:8px 18px;border-radius:18px;color:#ff6b61;background:rgba(255,72,72,.16);text-shadow:0 0 18px rgba(255,72,72,.7)}.closed .big-state{color:#72ff72;background:rgba(52,211,153,.15);text-shadow:0 0 18px rgba(74,222,128,.8)}
.micro-btn{position:absolute;top:30px;right:34px;border:1px solid rgba(148,163,184,.24);border-radius:15px;padding:14px 18px;display:flex;align-items:center;gap:12px;background:rgba(2,6,23,.55);color:#fff;font-size:1rem;font-weight:900;cursor:pointer;backdrop-filter:blur(12px)}.micro-btn span{font-size:1.8rem;color:#38bdf8;line-height:1}
.legend-strip{position:absolute;left:120px;right:120px;bottom:26px;display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid rgba(148,163,184,.24);border-radius:20px;background:rgba(2,6,23,.52);backdrop-filter:blur(14px);overflow:hidden}.legend-item{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px 28px;border-right:1px solid rgba(148,163,184,.2)}.legend-item:last-child{border-right:0}.legend-icon{font-size:2rem;font-weight:950;color:#38bdf8;text-shadow:0 0 20px rgba(56,189,248,.8)}.electron-icon{width:18px;height:18px;border-radius:50%;background:#38bdf8;margin:8px auto;box-shadow:0 0 22px #38bdf8}.energy-icon{color:#ff9d1c;text-shadow:0 0 20px #ff9d1c}.legend-item strong{font-size:1.18rem;color:#22d3ee}.legend-item p{font-size:1.02rem;line-height:1.45;color:#f8fafc;margin-top:8px}.scene-card:not(.closed) #legendField,.scene-card:not(.closed) #legendEnergy{opacity:.62}.closed .legend-strip{box-shadow:0 0 38px rgba(56,189,248,.08)}
.control-panel{border:1px solid var(--line);border-radius:26px;padding:28px 24px;background:linear-gradient(180deg,rgba(8,16,31,.92),rgba(8,16,31,.7));box-shadow:0 35px 120px rgba(0,0,0,.38)}.control-panel h2{font-size:1.7rem;margin-bottom:22px}.toggle{display:flex;align-items:center;gap:15px;margin:17px 0;color:white;font-size:1.08rem;font-weight:850;cursor:pointer}.toggle input{display:none}.toggle span{width:56px;height:30px;border-radius:999px;background:#334155;position:relative;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.toggle span:before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;left:3px;top:3px;background:#fff;transition:.24s}.toggle input:checked+span{background:linear-gradient(135deg,#0ea5e9,#38bdf8);box-shadow:0 0 24px rgba(56,189,248,.32)}.toggle input:checked+span:before{left:29px}
.timeline,.explain{margin-top:26px;padding:18px;border-radius:19px;background:rgba(2,6,23,.5);border:1px solid rgba(148,163,184,.2)}.timeline h3,.explain h3{font-size:1.28rem;color:#22d3ee;margin-bottom:14px}.step{padding:12px 14px;margin:9px 0;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.08);font-weight:850;color:#dbeafe}.step b{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:50%;background:#334155;color:#fff}.step.active{border-color:#0ea5e9;background:rgba(14,165,233,.16);box-shadow:inset 0 0 0 1px rgba(56,189,248,.12),0 0 24px rgba(14,165,233,.12)}.step.active b{background:#38bdf8;color:#00111c}.explain p{font-size:1.02rem;line-height:1.55;color:#fff}
.takeaway{display:flex;gap:22px;align-items:center;margin-top:18px;padding:28px 34px;border-radius:24px;background:#fff7e8;color:#261504;box-shadow:0 24px 80px rgba(0,0,0,.25)}.key-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#ff9800;color:white;font-size:1.7rem;flex:none}.takeaway h2{font-size:1.7rem}.takeaway p{font-size:1.12rem;line-height:1.5;margin-top:6px}
.micro-overlay{position:absolute;left:42px;right:42px;bottom:34px;padding:26px;border:1px solid rgba(148,163,184,.22);border-radius:22px;background:rgba(2,6,23,.62);backdrop-filter:blur(16px)}#microKicker{color:#22d3ee;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.micro-overlay h2{font-size:clamp(2rem,3.4vw,4rem);margin:10px 0 8px}.micro-overlay p{font-size:1.25rem;line-height:1.45;max-width:940px;color:#e0f2fe}
@media(max-width:1180px){.workspace{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px}.timeline,.explain{grid-column:span 2}.scene-card{min-height:680px}.legend-strip{left:40px;right:40px}.hero-panel{flex-direction:column;align-items:flex-start}.power-btn{width:100%}}
@media(max-width:760px){.scene-card{min-height:560px}.legend-strip{display:none}.state-badge{left:16px;top:16px}.micro-btn{right:16px;top:16px}.big-state{top:86px}.control-panel{display:block}.takeaway{align-items:flex-start;padding:20px}.hero-panel{padding:22px}.power-btn{min-width:0;font-size:1.15rem}.micro-overlay{left:16px;right:16px;bottom:16px;padding:18px}}

/* ===== BUILD X 10.0.1 ===== */
.hero-actions{display:flex;flex-direction:column;gap:14px;min-width:330px}
.lesson-btn{border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:18px 24px;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-weight:950;font-size:1.18rem;cursor:pointer;background:linear-gradient(135deg,#0ea5e9,#7c3aed);box-shadow:0 22px 60px rgba(56,189,248,.22);transition:.25s transform,.25s box-shadow}
.lesson-btn:hover{transform:translateY(-2px);box-shadow:0 28px 80px rgba(56,189,248,.34)}
.lesson-btn.running{background:linear-gradient(135deg,#7c3aed,#ff9800)}
.micro-btn{z-index:12;background:linear-gradient(135deg,rgba(255,152,0,.94),rgba(255,79,86,.9));box-shadow:0 18px 50px rgba(255,152,0,.28)}
.micro-mode .micro-btn{background:linear-gradient(135deg,#0ea5e9,#2563eb);box-shadow:0 18px 50px rgba(56,189,248,.28)}
.step{position:relative;overflow:hidden;display:flex;align-items:center;gap:0;min-height:54px}
.step span{position:relative;z-index:2}.step b{position:relative;z-index:2;flex:none}
.step i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:linear-gradient(90deg,rgba(56,189,248,.34),rgba(255,152,0,.24));opacity:.9;transition:width .35s ease;z-index:1}.step.active i{width:100%}
.scene-card.lesson-pulse{box-shadow:0 0 0 2px rgba(56,189,248,.35),0 35px 140px rgba(56,189,248,.2)}
.micro-overlay{z-index:5}.micro-btn{position:absolute!important}
@media(max-width:1180px){.hero-actions{width:100%;min-width:0}.lesson-btn,.power-btn{width:100%}}


/* ===== BUILD 11.0 FINAL - RIFINITURE SICURE ===== */
.power-btn.is-on{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 26px 70px rgba(34,197,94,.32);
}
.power-btn.is-off{
  background:linear-gradient(135deg,#ff9d1c,#ff4f56);
}
.scene-card:not(.closed) #fxCanvas{
  filter:saturate(.85) brightness(.88);
}
.scene-card:not(.closed) .legend-strip{
  opacity:.92;
}
.scene-card.closed .legend-strip{
  box-shadow:0 0 34px rgba(56,189,248,.14);
}
.scene-card.closed .state-badge{
  box-shadow:0 0 34px rgba(34,197,94,.12);
}


/* ===== BUILD 11.1 - AGGIORNAMENTO DIDATTICO ARTICOLO 2 ===== */
.speed-card,.formula-card{
  margin-top:20px;
  padding:18px;
  border-radius:19px;
  background:linear-gradient(180deg,rgba(2,6,23,.62),rgba(15,23,42,.46));
  border:1px solid rgba(148,163,184,.22);
}
.speed-card h3,.formula-card h3{
  font-size:1.28rem;
  color:#22d3ee;
  margin-bottom:14px;
}
.speed-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  color:#e0f2fe;
  font-weight:850;
}
.speed-row strong{
  color:#fff7ad;
  text-shadow:0 0 18px rgba(255,224,102,.32);
  white-space:nowrap;
}
.speed-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.34),transparent);
  margin:4px 0;
}
.speed-card p,.formula-card p{
  margin-top:10px;
  color:#f8fafc;
  font-size:.98rem;
  line-height:1.45;
}
.formula{
  text-align:center;
  font-size:2.1rem;
  font-weight:1000;
  letter-spacing:.02em;
  color:#fff7ad;
  padding:10px 12px;
  border-radius:15px;
  background:rgba(255,152,0,.10);
  box-shadow:inset 0 0 0 1px rgba(255,224,102,.16),0 0 28px rgba(255,152,0,.12);
}
@media(max-width:1180px){.speed-card,.formula-card{grid-column:span 2}}
@media(max-width:760px){.speed-row{align-items:flex-start;flex-direction:column}.speed-row strong{white-space:normal}.formula{font-size:1.65rem}}