:root {
  --ink: #1d1a17;
  --muted: #5c554d;
  --rust: #b7410e;
  --rust-dark: #93360b;
  --line: #ddd6ce;
  --bg: #ffffff;
  --panel: #f7f5f2;
  --dark: #211d1a;
  --green: #1e7a34;
  --red: #b3261e;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { font-family: "Iowan Old Style", Palatino, Georgia, serif; line-height: 1.2; }
code, pre, textarea.code { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
a { color: var(--rust-dark); }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 2px solid var(--ink); background: #fff; position: sticky; top: 0; z-index: 10; }
.brand { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; display: flex; gap: 10px; align-items: center; }
.brand-mark { background: var(--rust); color: #fff; font-family: ui-monospace, monospace; padding: 2px 8px; border-radius: 4px; font-size: 18px; }
.topbar-right { display: flex; gap: 16px; align-items: center; font-size: 14px; }
.rustc-status { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; }
.footer { padding: 18px 20px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }

.btn { display: inline-block; border: 1px solid var(--ink); background: #fff; color: var(--ink); padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 15px; text-decoration: none; }
.btn:hover { background: var(--panel); }
.btn-primary { background: var(--rust); border-color: var(--rust-dark); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--rust-dark); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-small { padding: 4px 10px; font-size: 13px; }

/* Catalog */
.catalog { max-width: 860px; margin: 0 auto; padding: 32px 20px 48px; }
.catalog h1 { font-size: 38px; margin: 0 0 8px; }
.catalog .lede { color: var(--muted); font-size: 18px; max-width: 62ch; }
.progress-wrap { margin: 22px 0 8px; }
.progress-bar { height: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--rust); width: 0; transition: width .3s; }
.lesson-list { list-style: none; margin: 18px 0; padding: 0; border-top: 1px solid var(--line); }
.lesson-list li { border-bottom: 1px solid var(--line); }
.lesson-list a { display: flex; gap: 14px; align-items: baseline; padding: 14px 6px; text-decoration: none; color: var(--ink); }
.lesson-list a:hover { background: var(--panel); }
.lesson-num { font-family: ui-monospace, monospace; color: var(--muted); width: 28px; flex: none; }
.lesson-title { font-weight: 650; font-size: 17px; }
.lesson-sub { color: var(--muted); font-size: 14px; }
.lesson-state { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--green); flex: none; }
.lesson-state.todo { color: var(--muted); font-weight: 400; }

/* Auth */
.auth-box { max-width: 400px; margin: 48px auto; padding: 0 20px; }
.auth-box label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 14px; }
.auth-box input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 16px; }
.auth-box .btn { width: 100%; margin-top: 18px; text-align: center; }
.auth-box .btn-github { background: #24292f; border-color: #24292f; color: #fff; font-weight: 600; margin-top: 6px; }
.auth-box .btn-github:hover { background: #3a4149; }
.auth-or { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.error-box { background: #fdf0ef; border: 1px solid #ecc5c2; color: var(--red); padding: 10px 12px; border-radius: 4px; margin-top: 14px; display: none; }

/* Lesson workspace: lecture | exercise (editor window over output window) */
.workspace { display: grid; grid-template-columns: minmax(320px, 42%) 1fr; height: calc(100vh - 57px); }
.lecture { overflow-y: auto; padding: 22px 26px 40px; border-right: 1px solid var(--line); }
.lecture h1 { font-size: 28px; margin: 2px 0 2px; }
.lecture .subtitle { color: var(--muted); margin: 0 0 18px; }
.lecture pre { background: var(--dark); color: #f2e9e2; padding: 12px 14px; border-radius: 5px; overflow-x: auto; font-size: 13.5px; line-height: 1.5; }
.lecture .note { background: var(--panel); border: 1px solid var(--line); padding: 10px 14px; border-radius: 5px; font-size: 14.5px; }
.instructions { border: 2px solid var(--rust); border-radius: 5px; padding: 12px 16px; margin: 22px 0 12px; }
.instructions h2 { margin: 0 0 6px; font-size: 18px; }
.checklist { list-style: none; padding: 0; margin: 10px 0; }
.checklist li { padding: 3px 0 3px 26px; position: relative; font-size: 14.5px; }
.checklist li::before { content: "○"; position: absolute; left: 4px; color: var(--muted); }
.checklist li.pass::before { content: "✓"; color: var(--green); font-weight: 700; }
.checklist li.fail::before { content: "✗"; color: var(--red); font-weight: 700; }
.hint-box { background: #fff8ec; border: 1px solid #ead9ae; padding: 8px 12px; border-radius: 4px; margin: 8px 0; font-size: 14.5px; display: none; }
.solution-box { display: none; }
.lesson-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 10px; }
.done-banner { display: none; background: #e9f6ec; border: 1px solid #b5dcbf; color: var(--green); font-weight: 650; padding: 10px 14px; border-radius: 5px; margin-top: 14px; }

.exercise { display: grid; grid-template-rows: 1fr minmax(160px, 38%); min-width: 0; background: var(--dark); }
.window { display: flex; flex-direction: column; min-height: 0; }
.window-head { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #2b2622; color: #d8cfc6; font-size: 13px; font-family: ui-monospace, monospace; border-bottom: 1px solid #3a332d; flex: none; }
.window-head .spacer { flex: 1; }
.window-head .btn { background: #3a332d; color: #f2e9e2; border-color: #574c42; }
.window-head .btn-primary { background: var(--rust); border-color: var(--rust-dark); color: #fff; }
#editor { flex: 1; overflow: auto; min-height: 0; }
#editor .cm-editor { height: 100%; font-size: 14px; }
textarea.code { width: 100%; height: 100%; background: #282c34; color: #e6e1da; border: 0; padding: 14px; font-size: 14px; line-height: 1.55; resize: none; outline: none; tab-size: 4; }
#output { flex: 1; overflow: auto; padding: 12px 14px; color: #e6e1da; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; min-height: 0; }
#output .dim { color: #9b8f83; }
#output .err { color: #ff9d94; }
#output .ok { color: #8fd69a; }

@media (max-width: 860px) {
  .workspace { grid-template-columns: 1fr; grid-template-rows: auto 70vh; height: auto; }
  .lecture { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }