:root { --bg:#f7f7f5; --fg:#1d1f23; --muted:#62666d; --card:#fff; --line:#dcdcd6; --accent:#2457d6; --ok:#17794a; --bad:#b3261e; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#16181c; --fg:#e8e9ec; --muted:#9aa0a8; --card:#1f2228; --line:#33373f; --accent:#7ea2ff; --ok:#5fcf97; --bad:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.55 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:.6rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; color:var(--fg); text-decoration:none; }
nav { display:flex; gap:.2rem; flex:1; flex-wrap:wrap; }
nav a { padding:.3rem .7rem; border-radius:6px; color:var(--muted); text-decoration:none; }
nav a.on, nav a:hover { background:var(--bg); color:var(--fg); }
.progress { font-size:.85rem; color:var(--muted); }
.warn { background:#fff3cd; color:#664d03; padding:.5rem 1.2rem; border-bottom:1px solid #e6cf80; }
main { max-width:1100px; margin:0 auto; padding:1.2rem; }
h1 { margin-top:0; } code { background:var(--bg); padding:.1em .35em; border-radius:4px; font-size:.9em; }
pre { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.8rem; overflow:auto; }
pre code { background:none; padding:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; margin:.8rem 0; }
button, .btn { font:inherit; padding:.4rem .9rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; text-decoration:none; display:inline-block; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
input[type=text], input[type=search], select, textarea { font:inherit; padding:.4rem .6rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
textarea { width:100%; min-height:340px; font-family:ui-monospace, monospace; font-size:.9rem; }
.lessons { list-style:none; padding:0; }
.lessons li { display:flex; gap:.7rem; align-items:center; padding:.6rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:8px; margin:.4rem 0; }
.lessons a { color:var(--fg); text-decoration:none; flex:1; }
.mark { width:1.4rem; text-align:center; color:var(--muted); } .done .mark { color:var(--ok); }
.opt { display:block; margin:.3rem 0; } .good { color:var(--ok); } .bad { color:var(--bad); }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.5rem 0; }
.sandbox { display:grid; grid-template-columns:270px 1fr; gap:1rem; }
@media (max-width:760px) { .sandbox { grid-template-columns:1fr; } }
.tree { list-style:none; padding:0; margin:0; font-size:.85rem; font-family:ui-monospace, monospace; }
.tree li { padding:.15rem .4rem; border-radius:4px; cursor:pointer; word-break:break-all; }
.tree li.on { background:var(--accent); color:#fff; } .tree li.dir { color:var(--muted); cursor:default; }
.issues li { margin:.2rem 0; }
.copy { float:right; font-size:.8rem; padding:.15rem .5rem; }

/* Mobile. Inputs stay at 16px: iOS Safari zooms the page on focus below that. */
html { -webkit-text-size-adjust: 100%; }
img, pre, textarea, select { max-width: 100%; }
@media (max-width: 760px) {
  header { position: static; padding: .5rem .8rem; gap: .4rem .8rem; }
  nav { order: 3; flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  nav a { white-space: nowrap; padding: .5rem .8rem; }
  .progress { margin-left: auto; }
  main { padding: .8rem; }
  h1 { font-size: 1.45rem; }
  .card { padding: .8rem; }
  button, .btn, input[type=text], input[type=search], select { min-height: 44px; font-size: 16px; }
  .row > input[type=text], .row > select, .row > label { flex: 1 1 100%; }
  .row > button, .row > .btn { flex: 1 1 auto; text-align: center; }
  .opt { padding: .45rem 0; }
  .opt input { width: 1.2rem; height: 1.2rem; margin-right: .4rem; vertical-align: middle; }
  .lessons li { padding: .75rem .8rem; }
  .sandbox { grid-template-columns: minmax(0, 1fr); }
  .sandbox > * { min-width: 0; }
  .tree li { padding: .5rem .4rem; }
  textarea { min-height: 260px; font-size: 16px; }
  .copy { float: none; display: block; margin-bottom: .3rem; min-height: 36px; }
  pre { font-size: .8rem; }
  .issues { padding-left: 1.1rem; }
}