/* Shared style for every unit page */
:root{
  --bg:#fffaf0; --card:#ffffff; --text:#2b2b2b; --muted:#666;
  --accent:#ff7a59; --accent2:#4c9aff; --green:#2fb36d; --yellow:#ffd84d; --purple:#8e6cf0;
  --code-bg:#1e2230; --code-text:#e6e6e6; --border:#f0e2c8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16181f; --card:#20232d; --text:#ececec; --muted:#a8a8a8; --border:#33374a; --code-bg:#0f1117;
  }
}
:root[data-theme="dark"]{
  --bg:#16181f; --card:#20232d; --text:#ececec; --muted:#a8a8a8; --border:#33374a; --code-bg:#0f1117;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Comic Sans MS","Chalkboard SE","Segoe UI",system-ui,sans-serif;line-height:1.6}
header{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:32px 16px;text-align:center}
header h1{margin:0;font-size:2.1rem}
header p{margin:6px 0 0;font-size:1.05rem}
header a.home{color:#fff;display:inline-block;margin-bottom:8px;font-size:.95rem}
nav{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:2px solid var(--border);
  display:flex;gap:6px;overflow-x:auto;padding:8px 16px}
nav a{white-space:nowrap;text-decoration:none;color:var(--text);padding:6px 12px;border-radius:999px;
  background:var(--bg);border:1px solid var(--border);font-size:.9rem}
nav a:hover{background:var(--yellow);color:#222}
main{max-width:920px;margin:0 auto;padding:16px}
section{background:var(--card);border:2px solid var(--border);border-radius:18px;padding:20px;margin:20px 0}
h2{margin-top:0;color:var(--accent)}
h3{color:var(--accent2);margin-bottom:6px}
.story{background:var(--yellow);color:#222;border-radius:12px;padding:12px 16px;margin:12px 0}
.story::before{content:"📖 Story time: ";font-weight:bold}
.tip{border-left:6px solid var(--green);padding:8px 14px;margin:12px 0;background:rgba(47,179,109,.1);border-radius:8px}
.tip::before{content:"💡 "}
.warn{border-left:6px solid var(--accent);padding:8px 14px;margin:12px 0;background:rgba(255,122,89,.1);border-radius:8px}
.warn::before{content:"⚠️ "}
.exam{border-left:6px solid var(--purple);padding:8px 14px;margin:12px 0;background:rgba(142,108,240,.1);border-radius:8px}
.exam::before{content:"📝 Exam point: ";font-weight:bold}
pre{background:var(--code-bg);color:var(--code-text);padding:14px;border-radius:12px;overflow-x:auto;
  font-family:Menlo,Consolas,monospace;font-size:.88rem;line-height:1.45;margin:8px 0}
pre.out{background:#000;color:#7CFC7C}
.label{font-size:.8rem;font-weight:bold;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:0}
code{font-family:Menlo,Consolas,monospace;background:rgba(127,127,127,.15);padding:1px 5px;border-radius:5px}
pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%;margin:10px 0;display:block;overflow-x:auto}
td,th{border:1px solid var(--border);padding:8px;text-align:left;vertical-align:top}
th{background:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.box{border:2px dashed var(--accent2);border-radius:12px;padding:12px;margin:12px 0}
.card{border:2px solid var(--border);border-radius:14px;padding:14px;background:var(--bg)}
button{font-family:inherit;font-size:1rem;background:var(--accent);color:#fff;border:none;
  border-radius:10px;padding:8px 16px;cursor:pointer;margin:4px}
button:hover{filter:brightness(1.1)}
button.secondary{background:var(--accent2)}
input,select,textarea{font-family:inherit;font-size:1rem;padding:6px 10px;border-radius:8px;border:2px solid var(--border);
  background:var(--bg);color:var(--text);max-width:100%}
/* memory boxes: use for variables, arrays, pointers */
.mem{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.cell{min-width:52px;padding:6px;border-radius:10px;background:var(--bg);border:2px solid var(--accent2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:bold;transition:.2s}
.cell small{font-size:.7rem;color:var(--muted);font-weight:normal}
.cell.on{background:var(--accent);color:#fff;transform:translateY(-6px)}
.cell.ok{background:var(--green);color:#fff}
.cell.dim{opacity:.35}
details{margin:8px 0;border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--bg)}
summary{cursor:pointer;font-weight:bold}
.quiz-q{margin:14px 0;padding:10px;border-radius:10px;background:var(--bg)}
.quiz-q button{background:var(--accent2)}
.right{color:var(--green);font-weight:bold}
.wrong{color:var(--accent);font-weight:bold}
svg text{fill:var(--text)}
footer{text-align:center;color:var(--muted);padding:24px 16px}
.units{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.units a{display:block;text-decoration:none;color:var(--text);border:2px solid var(--border);border-radius:16px;
  padding:16px;background:var(--card);transition:.2s}
.units a:hover{transform:translateY(-4px);border-color:var(--accent)}
.units a b{color:var(--accent);font-size:1.15rem}
@media (max-width:600px){header h1{font-size:1.6rem} section{padding:14px}}