/* CodeMirror 5.65.18 base styles (MIT), inlined so hosts that block CDN stylesheets still work */
.CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta{color:#555}.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error{color:red}.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}

/* ============ Python Path — clean notebook course theme ============ */
:root {
  --bg: #ffffff;
  --bg-soft: #f8f9fa;
  --bg-code: #f7f7f8;
  --line: #dadce0;
  --line-soft: #e8eaed;
  --ink: #202124;
  --ink-2: #3c4043;
  --muted: #5f6368;
  --blue: #0f8be0;
  --blue-dark: #0a6fb5;
  --blue-soft: #e8f4fd;
  --green: #188038;
  --green-soft: #e6f4ea;
  --red: #c5221f;
  --red-soft: #fce8e6;
  --amber: #b06000;
  --amber-soft: #fef7e0;
  --violet: #6741d9;
  --violet-soft: #f1ecfd;
  --radius: 8px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  --sidebar: 280px;
  --top: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1f22; --bg-soft: #26272b; --bg-code: #2a2b30; --line: #3c3f45; --line-soft: #33363b;
    --ink: #e8eaed; --ink-2: #d2d4d8; --muted: #9aa0a6; --blue: #4db1f5; --blue-dark: #8ccaf8; --blue-soft: #1c3346;
    --green: #81c995; --green-soft: #1e3526; --red: #f28b82; --red-soft: #3b2322; --amber: #fdd663; --amber-soft: #3a3220;
    --violet: #b9a3f5; --violet-soft: #2c2640;
  }
}
:root[data-theme="dark"] {
  --bg: #1f1f22; --bg-soft: #26272b; --bg-code: #2a2b30; --line: #3c3f45; --line-soft: #33363b;
  --ink: #e8eaed; --ink-2: #d2d4d8; --muted: #9aa0a6; --blue: #4db1f5; --blue-dark: #8ccaf8; --blue-soft: #1c3346;
  --green: #81c995; --green-soft: #1e3526; --red: #f28b82; --red-soft: #3b2322; --amber: #fdd663; --amber-soft: #3a3220;
  --violet: #b9a3f5; --violet-soft: #2c2640;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .88em; background: var(--bg-code); border: 1px solid var(--line-soft); padding: 1px 5px; border-radius: 4px; }
pre { font-family: var(--mono); white-space: pre-wrap; word-break: break-word; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: var(--top);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 17px; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.top-stats { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; white-space: nowrap; }
.pill.level b { font-weight: 600; }
.pill small { color: var(--muted); font-size: 12px; }
.xpbar { width: 70px; height: 6px; background: var(--line-soft); border-radius: 6px; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 6px; transition: width .8s ease; }
.streak.hot { border-color: #f9ab00; background: var(--amber-soft); }
.kernel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.kernel i { width: 8px; height: 8px; border-radius: 50%; background: #f9ab00; animation: pulse 1.2s infinite; }
.kernel.ok i { background: #34a853; animation: none; }
.kernel.bad i { background: var(--red); animation: none; }
@keyframes pulse { 50% { opacity: .3; } }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; font-size: 18px; color: var(--muted); }
.icon-btn:hover { background: var(--bg-soft); color: var(--ink); }
.menu-btn { display: none; }

/* ---------- layout ---------- */
.page { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--top)); }
.sidebar { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg-soft); padding: 16px 0 40px; }
.scrim { display: none; }
main { min-width: 0; padding: 28px 40px 80px; max-width: 920px; width: 100%; outline: none; }
main.home { max-width: 1040px; }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } }

/* sidebar outline */
.side-course { padding: 0 20px 12px; font-weight: 700; font-size: 14px; }
.side-course small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }
.side-progress { margin: 8px 0 0; height: 4px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.side-progress i { display: block; height: 100%; background: var(--green); transition: width .6s ease; }
.unit-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 16px 20px 6px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 7px 20px; color: var(--ink-2); font-size: 14px; border-left: 3px solid transparent; cursor: pointer; }
.side-link:hover { background: var(--line-soft); text-decoration: none; }
.side-link.current { border-left-color: var(--blue); background: var(--blue-soft); color: var(--ink); font-weight: 600; }
.side-link.locked { color: var(--muted); }
.side-link .dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.side-link.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.side-link.started .dot { border-color: var(--blue); color: var(--blue); }
.side-link .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  font-size: 14px; font-weight: 500; transition: background .15s, border-color .15s, box-shadow .15s; white-space: nowrap;
}
.btn:hover { background: var(--bg-soft); border-color: #bdc1c6; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--blue); }
.btn.ghost:hover { background: var(--blue-soft); }
.btn.danger { color: var(--red); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.big { padding: 10px 20px; font-size: 15px; }
.btn.busy { pointer-events: none; opacity: .8; }
.btn.busy::before { content: ''; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- home ---------- */
.course-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, var(--blue-soft), var(--bg) 60%); margin-bottom: 28px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
h1 { font-size: 30px; line-height: 1.25; margin: 6px 0 10px; letter-spacing: -.01em; }
h2 { font-size: 20px; margin: 32px 0 12px; }
h3 { font-size: 17px; margin: 0; }
.course-hero p { color: var(--ink-2); margin: 0 0 18px; max-width: 560px; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-note { color: var(--muted); font-size: 13px; }
.stat-card { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 16px; display: grid; gap: 12px; align-content: start; }
.stat-row { display: flex; justify-content: space-between; font-size: 14px; }
.stat-row b { font-weight: 600; }
.progress { height: 8px; background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--green); border-radius: 8px; transition: width .8s ease; }
.unit { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.unit-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.unit-head h3 { flex: 1; }
.unit-head small { color: var(--muted); }
.lesson-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .15s; }
.lesson-row:last-child { border-bottom: 0; }
.lesson-row:hover { background: var(--bg-soft); }
.lesson-row.locked { cursor: not-allowed; color: var(--muted); }
.lesson-row .num { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--muted); }
.lesson-row.done .num { background: var(--green); border-color: var(--green); color: #fff; }
.lesson-row.open .num { border-color: var(--blue); color: var(--blue); }
.lesson-row .info { flex: 1; min-width: 0; }
.lesson-row .info b { font-weight: 600; display: block; }
.lesson-row .info small { color: var(--muted); }
.ex-dots { display: flex; gap: 4px; }
.ex-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ex-dots i.on { background: var(--green); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.badge { border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.badge .ico { font-size: 24px; display: block; filter: grayscale(1); opacity: .45; }
.badge.got { color: var(--ink); border-color: #b7dfc2; background: var(--green-soft); }
.badge.got .ico { filter: none; opacity: 1; }
.badge small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.site-note { margin-top: 28px; font-size: 12px; color: var(--muted); }

/* ---------- lesson page ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); }
.lesson-head { margin-bottom: 8px; }
.lesson-intro { color: var(--ink-2); font-size: 16px; margin: 0 0 6px; }
.lesson-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.lesson-meta .progress { flex: 1; max-width: 240px; height: 6px; }

.step { margin-bottom: 36px; }
.step.reveal { animation: fadeIn .5s ease both; }
.step-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.step-label .n { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 11px; }
.learn { font-size: 15.5px; color: var(--ink); }
.learn p { margin: 0 0 10px; }

/* code cells (notebook style) */
.cell { display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-code); margin: 10px 0; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.cell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.cell-gutter { display: flex; justify-content: center; padding-top: 8px; border-right: 1px solid var(--line-soft); }
.run-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--blue); cursor: pointer; display: grid; place-items: center; font-size: 11px; padding-left: 2px; transition: all .15s; }
.run-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.run-btn.busy { animation: spin 1s linear infinite; padding: 0; }
.cell-body { min-width: 0; }
.cell-tag { font-size: 11px; color: var(--muted); padding: 6px 12px 0; display: flex; justify-content: space-between; gap: 8px; }
.cell .CodeMirror { height: auto; min-height: 44px; background: transparent; font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--ink); }
.cell .CodeMirror-scroll { min-height: 44px; }
.cell .CodeMirror-gutters { background: transparent; border-right: 0; }
.cell .CodeMirror-linenumber { color: #9aa0a6; }
.cell .CodeMirror-cursor { border-left: 2px solid var(--ink); }
.cm-s-nb .cm-keyword { color: #a626a4; font-weight: 500; }
.cm-s-nb .cm-def { color: #4078f2; }
.cm-s-nb .cm-builtin { color: #0184bc; }
.cm-s-nb .cm-string { color: #50a14f; }
.cm-s-nb .cm-number { color: #986801; }
.cm-s-nb .cm-comment { color: #8b929a; font-style: italic; }
.cm-s-nb .cm-operator { color: #383a42; }
.cm-s-nb .cm-variable-2, .cm-s-nb .cm-property { color: #e45649; }
.cm-err-line { background: rgba(197, 34, 31, .12); }
.cm-step-line { background: rgba(15, 139, 224, .14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-s-nb .cm-keyword { color: #c792ea; }
  :root:not([data-theme="light"]) .cm-s-nb .cm-def { color: #82aaff; }
  :root:not([data-theme="light"]) .cm-s-nb .cm-builtin { color: #89ddff; }
  :root:not([data-theme="light"]) .cm-s-nb .cm-string { color: #c3e88d; }
  :root:not([data-theme="light"]) .cm-s-nb .cm-number { color: #f78c6c; }
  :root:not([data-theme="light"]) .cm-s-nb .cm-operator { color: #d2d4d8; }
  :root:not([data-theme="light"]) .cm-s-nb .cm-variable-2, :root:not([data-theme="light"]) .cm-s-nb .cm-property { color: #f07178; }
}
.cell-out { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); background: var(--bg); }
.cell-out pre { margin: 0; padding: 10px 14px 10px 56px; font-size: 13.5px; max-height: 280px; overflow: auto; color: var(--ink); }
.cell-out pre.empty { color: var(--muted); font-style: italic; }
.cell-out .err-text { color: var(--red); }

/* exercise card */
.exercise { border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 14px; background: var(--bg); position: relative; }
.exercise.passed { border-color: #a8dab5; }
.exercise.passed::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: 10px 0 0 10px; background: var(--green); }
.ex-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-label { font-size: 12px; font-weight: 600; color: #fff; background: var(--blue); padding: 2px 8px; border-radius: 4px; }
.exercise.passed .ex-label { background: var(--green); }
.ex-head h3 { flex: 1; min-width: 140px; }
.xp-tag { font-size: 12px; color: var(--muted); }
.status-tag { font-size: 12px; font-weight: 600; color: var(--green); }
.ex-prompt { margin: 10px 0 4px; color: var(--ink); }
.ex-prompt pre, .learn pre, .feedback pre { background: var(--bg-code); border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }
.ex-inputs { font-size: 13px; color: var(--muted); margin: 6px 0; }
.ex-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ex-actions .spacer { flex: 1; }

/* feedback blocks */
.feedback { margin-top: 10px; display: grid; gap: 8px; }
.fb { border-radius: 6px; padding: 10px 14px; font-size: 14px; border-left: 4px solid; animation: fadeIn .3s ease both; }
.fb p { margin: 4px 0; }
.fb .fb-title { font-weight: 600; }
.fb.ok { background: var(--green-soft); border-color: var(--green); }
.fb.ok .fb-title { color: var(--green); }
.fb.bad { background: var(--red-soft); border-color: var(--red); }
.fb.bad .fb-title { color: var(--red); }
.fb.hint { background: var(--amber-soft); border-color: #f9ab00; }
.fb.hint .fb-title { color: var(--amber); }
.fb.ai { background: var(--violet-soft); border-color: var(--violet); }
.fb.ai .fb-title { color: var(--violet); }
.fb.info { background: var(--bg-soft); border-color: var(--line); }
.fb .where { font-family: var(--mono); font-size: 13px; background: var(--bg); border: 1px solid var(--line-soft); padding: 4px 8px; border-radius: 4px; display: inline-block; margin: 4px 0; }
.fb .raw { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.fb .fb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fb ol { margin: 4px 0; padding-left: 20px; }
.dots3 span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--violet); animation: bounce 1s infinite; }
.dots3 span:nth-child(2) { animation-delay: .15s; } .dots3 span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 50% { transform: translateY(-4px); opacity: .4; } }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 14px; background: var(--bg); color: var(--ink); }
.ask-row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.shake { animation: shake .4s; }
@keyframes shake { 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
.pop { animation: pop .5s ease; }
@keyframes pop { 40% { transform: scale(1.015); } }

/* explain & trace tools */
.tools { margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.tool-tabs { display: flex; background: var(--bg-soft); border-bottom: 1px solid var(--line-soft); }
.tool-tab { border: 0; background: none; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.tool-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.tool-pane { padding: 10px 12px; font-size: 14px; }
.ex-row { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; }
.ex-row:hover { background: var(--bg-soft); }
.ex-row .n { color: var(--muted); font-size: 12px; font-family: var(--mono); padding-top: 2px; }
.ex-row code { display: block; margin-bottom: 2px; background: none; border: 0; padding: 0; color: var(--blue-dark); white-space: pre-wrap; word-break: break-word; }
.ex-row.err { background: var(--red-soft); }
.trace-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trace-ctl input[type=range] { flex: 1; min-width: 100px; accent-color: var(--blue); }
.trace-ctl .count { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.trace-line { margin: 10px 0; padding: 8px 12px; background: var(--blue-soft); border-radius: 6px; }
.trace-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.vars { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.vars td { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; word-break: break-word; }
.vars td:first-child { color: var(--blue-dark); width: 40%; }
.vars tr.changed td { background: var(--green-soft); }
.trace-out { margin: 0; background: var(--bg-code); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; min-height: 40px; max-height: 160px; overflow: auto; }

/* locked steps */
.locked-step { border: 1px dashed var(--line); border-radius: 10px; padding: 18px; color: var(--muted); display: flex; align-items: center; gap: 12px; background: var(--bg-soft); }
.locked-step b { color: var(--ink-2); }
.lesson-end { border: 1px solid #a8dab5; background: var(--green-soft); border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; animation: fadeIn .4s ease both; }
.lesson-end .big-check { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 22px; }
.lesson-end div.txt { flex: 1; min-width: 200px; }

/* ---------- dialogs & toasts ---------- */
.dlg { border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 40px); background: var(--bg); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.dlg[open] { animation: fadeIn .25s ease; }
.dlg::backdrop { background: rgba(32,33,36,.45); }
.dlg-inner { padding: 22px; display: grid; gap: 12px; }
.dlg-inner.center { text-align: center; justify-items: center; }
.dlg h3 { font-size: 19px; }
.dlg h4 { margin: 10px 0 0; font-size: 14px; }
.dlg h4 small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.row input { margin-top: 4px; accent-color: var(--blue); }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.field input, .field select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 14px; background: var(--bg); color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { flex: 1; min-width: 120px; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; cursor: pointer; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.seg label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.seg input { accent-color: var(--blue); }
.prov-box { display: none; gap: 10px; padding: 12px; border-radius: 8px; background: var(--bg-soft); }
.prov-box.show { display: grid; }
.note { color: var(--muted); font-size: 12px; margin: 0; }
.row-btns, .dlg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dlg-actions { justify-content: flex-end; margin-top: 6px; }
.dlg-inner.center .dlg-actions { justify-content: center; }
.done-check { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; font-size: 32px; display: grid; place-items: center; animation: pop .6s ease; }
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: calc(100vw - 32px); }
.toast { background: #202124; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.25); animation: toastIn .3s ease both, toastOut .4s ease 3.4s forwards; max-width: 480px; text-align: center; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }
  .menu-btn { display: grid; place-items: center; }
  .sidebar { position: fixed; left: 0; top: var(--top); bottom: 0; height: auto; width: min(300px, 85vw); z-index: 25; transform: translateX(-102%); transition: transform .25s ease; box-shadow: 4px 0 20px rgba(0,0,0,.15); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: var(--top) 0 0 0; background: rgba(0,0,0,.3); z-index: 20; }
  main { padding: 20px 16px 70px; }
  .course-hero { grid-template-columns: 1fr; padding: 20px; }
}
@media (max-width: 600px) {
  .kernel span, .pill small, .xpbar, .logo-text { display: none; }
  h1 { font-size: 24px; }
  .cell { grid-template-columns: 36px minmax(0, 1fr); }
  .cell-out pre { padding-left: 14px; }
  .trace-cols { grid-template-columns: 1fr; }
  .ex-actions .btn { flex: 1 1 auto; }
  .ex-actions .spacer { display: none; }
  .lesson-row .ex-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }