*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{--bg:#ffffff;--fg:#111827;--muted:#6b7280;--accent:#1d4ed8;--card:#f8fafc;--border:#e5e7eb}
body{background:var(--bg);color:var(--fg);font:18px/1.7 Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}
.container{max-width:1000px;margin:0 auto;padding:0 16px}
.site-header{background:var(--card);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:12px;padding:14px 0}
.brand{color:var(--fg);text-decoration:none;font-weight:700}
.subtitle{color:var(--muted);font-size:15px}
.site-nav{background:#ffffff;border-bottom:1px solid var(--border)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;overflow:auto}
.site-nav a{display:block;padding:10px 12px;color:#374151;text-decoration:none;border-radius:6px}
.site-nav a.active,.site-nav a:hover{background:#eef2ff;color:#1e3a8a}
main.container{padding:28px 0}
.lesson-list{padding-left:18px}
section h1{margin-top:0;font-size:32px}
section h2{margin-top:28px;font-size:24px}
section h3{margin-top:22px;font-size:20px}
pre{background:#f8fafc;border:1px solid var(--border);padding:14px;border-radius:8px;overflow:auto}
code{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace}
p code, li code { background:#f3f4f6; border:1px solid #e5e7eb; padding:1px 4px; border-radius:4px }
.media{margin:16px 0;text-align:center}
.media img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:8px;background:#ffffff}
.media figcaption{color:var(--muted);font-size:14px;margin-top:6px}
.site-footer{border-top:1px solid var(--border);background:var(--card);margin-top:32px}
.site-footer .container{padding:16px 0;color:#4b5563;font-size:14px}
.exercise{background:#fff7ed;border:1px solid #f59e0b;padding:14px;border-radius:8px;margin:16px 0}
.exercise h4{margin:0 0 8px;color:#92400e;font-size:18px}
.exercise ol{margin:0 0 0 18px}
.solution{display:none;background:#eef2ff;border:1px solid #c7d2fe;padding:14px;border-radius:8px;margin-top:10px}
.solution .label{color:#1e3a8a;font-weight:700;margin:0 0 6px}
.toggle-solution{appearance:none;border:1px solid #c7d2fe;background:#e0e7ff;color:#1e3a8a;padding:6px 10px;border-radius:6px;font-size:14px;cursor:pointer}
.toggle-solution:hover{background:#c7d2fe}
/* Cursor for Prism toolbar Copy button */
.toolbar .toolbar-item > button{cursor:pointer}
.toolbar .toolbar-item > button:hover{filter:brightness(0.98)}

/* Quiz component */
.quiz{background:#ecfeff;border:1px solid #06b6d4;padding:14px;border-radius:8px;margin:16px 0}
.quiz h5{margin:0 0 8px;color:#0e7490}
.quiz .quiz-options{margin:6px 0}
.quiz .quiz-check{appearance:none;border:1px solid #06b6d4;background:#cffafe;color:#0e7490;padding:6px 10px;border-radius:6px;font-size:14px;cursor:pointer}
.quiz .quiz-check:hover{background:#a5f3fc}
.quiz .quiz-feedback{margin-top:8px;font-size:14px}
.quiz .quiz-ok{color:#166534;font-weight:700}
.quiz .quiz-bad{color:#991b1b;font-weight:700}
.quiz .quiz-expl{color:#334155;margin-top:4px}
.quiz .quiz-warn{color:#92400e}

/* Simulators (while, do-while, for) */
.while-sim,.do-while-sim,.for-sim{background:#eef2ff;border:1px solid #94a3b8;padding:14px;border-radius:8px;margin:16px 0}
.while-sim .wrap,.do-while-sim .wrap,.for-sim .wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.while-sim .panel,.do-while-sim .panel,.for-sim .panel{flex:1 1 280px}
.while-sim .diagram,.do-while-sim .diagram,.for-sim .diagram{flex:1 1 260px;min-width:260px}
.while-sim .code,.do-while-sim .code,.for-sim .code{flex:1 1 320px;min-width:280px}
.while-sim .controls,.do-while-sim .controls,.for-sim .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.while-sim input[type="number"],.do-while-sim input[type="number"],.for-sim input[type="number"]{width:90px;padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px}
.while-sim button,.do-while-sim button,.for-sim button{appearance:none;border:1px solid #94a3b8;background:#e2e8f0;color:#0f172a;padding:6px 10px;border-radius:6px;font-size:14px;cursor:pointer}
.while-sim button:hover,.do-while-sim button:hover,.for-sim button:hover{background:#cbd5e1}
.while-sim .sim-output,.do-while-sim .sim-output,.for-sim .sim-output{background:#ffffff;border:1px dashed #94a3b8;padding:8px;border-radius:6px;min-height:34px}
.while-sim .sim-output,.do-while-sim .sim-output,.for-sim .sim-output{white-space:pre-wrap}
.while-sim .sim-vars,.do-while-sim .sim-vars,.for-sim .sim-vars{margin-top:6px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;color:#0f172a}

/* Highlight current node in Mermaid diagrams */
.mermaid .active rect,
.mermaid .active polygon,
.mermaid .active path {
  stroke:#2563eb !important;
  stroke-width:2px !important;
  fill:#dbeafe !important;
}

/* Code line highlight in simulator */
.sim-code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:14px;line-height:1.5}
.sim-code .code-line{display:block}
.sim-code .code-line.hl{background:#fffbeb;border-left:4px solid #f59e0b;padding-left:8px;border-radius:3px}

/* Home: hero and cards */
.hero{background:linear-gradient(135deg,#ecfeff,#e0e7ff);border:1px solid #c7d2fe;padding:24px;border-radius:12px;margin:20px 0}
.hero h1{margin:0 0 6px;font-size:28px;color:#0f172a}
.hero p{margin:0 0 12px;color:#334155}
.hero .cta .btn{display:inline-block;background:#1d4ed8;color:#fff;text-decoration:none;border-radius:8px;padding:8px 14px;font-weight:600;border:1px solid #1e40af}
.hero .cta .btn:hover{background:#1e40af}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:12px}
.card{display:block;text-decoration:none;border:1px solid #e2e8f0;background:#ffffff;padding:14px;border-radius:10px;transition:box-shadow .15s, transform .05s}
.card:hover{box-shadow:0 6px 16px rgba(2,6,23,.08);transform:translateY(-1px)}
.card .card-title{color:#0f172a;font-weight:700;margin-bottom:6px}
.card .card-meta{color:#475569;font-size:13px}

/* Lesson media placeholders */
.media{margin:14px 0}
.img-placeholder{display:flex;align-items:center;justify-content:center;background:#f8fafc;border:2px dashed #cbd5e1;color:#475569;border-radius:8px;min-height:140px;padding:12px;text-align:center}
.img-placeholder::before{content:"Segnaposto immagine";font-size:12px;color:#64748b;position:absolute;transform:translateY(-120%)}