:root{
  --bg:#111114; --panel:#1a1a1f; --code-bg:#1e1e22; --border:#2f2f36;
  --accent:#e63946; --accent2:#5a8fdd; --text:#e8e8ea; --muted:#9a9a9f;
  --ok:#4caf6f; --warn:#f0c674;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:"Trebuchet MS","Segoe UI",sans-serif; line-height:1.6;}

.topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:#0c0c0e; border-bottom:1px solid var(--border);}
.topbar .brand{font-weight:700; letter-spacing:.5px;}
.topbar .brand span{color:var(--accent);}
.topbar .meta{font-size:13px; color:var(--muted);}

.progress-track{max-width:820px; margin:0 auto; padding:18px 24px 0; display:flex; gap:5px; flex-wrap:wrap;}
.progress-track .seg{flex:0 0 14px; width:14px; min-width:14px; height:6px; border-radius:4px; background:#2a2a30;}
.progress-track .seg.done{background:var(--ok);}
.progress-track .seg.done:hover{background:#6fcf97; transform:scaleY(1.8); transition:all .15s ease;}
.progress-track .seg.active{background:var(--accent2);}

.wrap{max-width:820px; margin:0 auto; padding:28px 24px 90px;}
.lesson-block{background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:24px 26px; margin-bottom:22px; display:none;}
.lesson-block.active{display:block;}
.kicker{font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:6px;}
h2{margin:0 0 12px; font-size:22px;}
p.explain{color:#cfcfd2; font-size:15.5px;}
.explain table{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px;}
.explain th, .explain td{border:1px solid var(--border); padding:6px 10px; text-align:left;}
.explain th{background:#22222a; color:var(--muted);}

.tts-btn{display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border);
  color:var(--muted); padding:6px 12px; border-radius:20px; font-size:13px; cursor:pointer; margin-bottom:14px;}
.tts-btn:hover{border-color:var(--accent2); color:var(--text);}
.tts-btn.speaking{border-color:var(--accent); color:var(--accent);}

.code{font-family:"SF Mono",Consolas,monospace; font-size:13.5px; line-height:1.8; background:var(--code-bg);
  border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin:14px 0; overflow-x:auto; white-space:pre;}
.code .cm{color:#6a6a72; font-style:italic;}
.code .num{color:var(--warn);}

textarea.editor{width:100%; min-height:120px; font-family:"SF Mono",Consolas,monospace; font-size:14px;
  background:var(--code-bg); border:1px solid var(--border); border-radius:10px; color:#e8e8ea;
  padding:14px 16px; resize:vertical; line-height:1.6; margin-top:10px;}
textarea.editor:focus{outline:none; border-color:var(--accent2);}

.run-row{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;}
.run-btn{background:var(--accent2); color:#fff; border:none; border-radius:8px; padding:9px 18px;
  font-size:14px; font-weight:600; cursor:pointer;}
.run-btn:hover{background:#4a7ecc;}
.run-btn:disabled{opacity:.5; cursor:wait;}
.next-btn{background:var(--accent); color:#fff; border:none; border-radius:8px; padding:9px 18px;
  font-size:14px; font-weight:600; cursor:pointer; opacity:.4; pointer-events:none; transition:opacity .2s;}
.next-btn.enabled{opacity:1; pointer-events:auto;}
.next-btn.enabled:hover{background:#c62d3a;}
.confirm-row{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:14px;}
.confirm-row input{width:18px; height:18px;}

.terminal{font-family:"SF Mono",Consolas,monospace; font-size:13px; white-space:pre-wrap; background:#0c0c0e;
  border:1px solid var(--border); border-radius:8px; padding:12px 16px; margin-top:12px; min-height:22px; display:none;}
.terminal.show{display:block;}
.terminal.ok{color:#8fe3a0;}
.terminal.err{color:#e88;}
.hint{background:#241a1a; border:1px solid #5a2a2e; border-radius:8px; padding:10px 14px; margin-top:10px;
  font-size:13.5px; color:#f0b0b0; display:none;}
.hint.show{display:block;}
.feedback{font-size:13.5px; margin-top:8px; color:var(--muted);}
.feedback.correct{color:var(--ok);}

.download-box{background:#182018; border:1px solid #2a4a2a; border-radius:10px; padding:16px 18px; margin:14px 0;}
.download-box a{color:#8fe3a0; font-weight:600;}

.badge-locked{display:inline-block; background:#2a1a1a; border:1px solid var(--accent); color:#f0b0b0;
  padding:10px 16px; border-radius:8px; font-size:14px;}

.back-btn{background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:8px;
  padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer;}
.back-btn:hover{border-color:var(--accent2); color:var(--text);}

/* The floating social-share widget below (.icon-float) is a marketing element
   from the main site template. On narrower viewports (common on smaller Mac
   screens) its position:fixed; right:0; z-index:999 can overlap and visually
   hide lesson content/buttons sitting near the right edge of .wrap. It has no
   purpose on interactive lesson pages, so it's hidden here entirely. */
.wrap ~ .icon-float, body:has(.lesson-block) .icon-float{display:none;}


.icon-float {
    position: fixed;
    top: 35%;
    z-index: 999;
    right: 0px;
}
.icon-float ul {
    padding: 0px;
}
.icon-float ul li {
    list-style-type: none;
}
.icon-float ul li a {
    display: block;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 0px;
}
.icon-float ul li a i {
    padding: 8px;
    width: 40px;
    height: 32px;
    text-align: center;
    color: #fff;
}
.icon-float ul li a:hover {
    transform: rotateY(-180deg);
}
.icon-float ul li a:hover i {
    transform: rotateY(180deg);
}
.fb1 { background: #3b5998; }
.gp1 { background: #dd4b39; }
.li1 { background: #0077b5; }
.wa1 { background: #34af23; }
.sh1 { background: #333; border-bottom-left-radius: 5px; }