diff --git a/README.md b/README.md
index 9e07567..e1cf689 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,9 @@ the Linux Foundation's exam UI), written anew for this simulator:
   the remote desktop. The clock starts when you click **Start** in the dialog that opens the session.
 - **Results page** — points and pass or fail, every task with its checks, the answers, what to drill
   next, and a way back to the tasks to review them on their hosts.
+- **Theme** — Auto (your system's light or dark setting, the default), Light or Dark, from the
+  landing page's top bar, the *Exam Interface* menu or the results page; the browser remembers it.
+  The remote desktop keeps its own look.
 
 Firefox in the desktop opens only the allowed documentation for the track (`KSIM_OPEN_WEB=1`
 lifts that). Submitting grades every task on its own host; the hosts stay up for review until the
diff --git a/web/index.html b/web/index.html
index 7d3a6ba..6a8fdba 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,27 +4,88 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Kubestronaut exam simulator</title>
+<script>/* the theme you picked, before anything is drawn: no flash of the other one */
+try { const t = localStorage.getItem('ksim.theme'); if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t; } catch (e) { /* storage blocked: follow the system */ }</script>
 <style>
   /* The look of CK-X (github.com/sailor-sh/CK-X), itself modelled on the Linux Foundation exam UI:
      an indigo landing page, an exam screen with a dark top bar and a light question panel, and a
-     plain results page. Written from scratch - no CK-X code is copied - and without anything from
-     the network: the page has to work offline. */
+     plain results page - plus a dark theme of its own. Written from scratch - no CK-X code is
+     copied - and without anything from the network: the page has to work offline.
+     Colours are tokens: light below, dark for data-theme="dark" and for Auto on a dark system. */
   :root {
-    --indigo: #4f46e5; --indigo-dark: #3730a3; --indigo-light: #818cf8; --indigo-soft: #eef2ff;
-    --ink: #111827; --text: #212529; --muted: #6b7280; --bg: #f9fafb; --line: #dee2e6; --line-2: #ddd;
-    --blue: #0d6efd; --blue-hover: #0b5ed7; --divider: #1e88e5;
-    --green: #198754; --green-hover: #157347; --ok: #27ae60; --bad: #e74c3c;
+    color-scheme: light;
+    --indigo: #4f46e5; --indigo-dark: #3730a3; --indigo-light: #818cf8;
+    --accent-text: #4f46e5; --accent-strong: #3730a3; --accent-soft: #eef2ff; --accent-soft-text: #312e81;
+    --hero-a: #4f46e5; --hero-b: #818cf8;
+    --bg: #f9fafb; --surface: #fff; --surface-2: #f8f9fa; --surface-3: #f5f5f5; --hover: #e9ecef;
+    --pre-bg: #f6f8fa; --results-bg: #f4f6f9;
+    --ink: #111827; --text: #212529; --muted: #6b7280; --faint: #9ca3af;
+    --line: #dee2e6; --line-2: #ddd; --line-soft: #edf0f3; --input-line: #ced4da;
+    --link: #0d6efd; --blue: #0d6efd; --blue-hover: #0b5ed7; --divider: #1e88e5;
+    --green: #198754; --green-hover: #157347; --ok: #27ae60; --bad: #e74c3c; --partial: #d68910;
+    --ok-text: #198754; --warn-text: #b58100; --bad-text: #dc3545;
     --yellow: #ffc107; --red: #dc3545; --red-hover: #bb2d3b; --grey: #6c757d; --grey-hover: #5c636a;
-    --code: #d63384; --code-bg: rgba(0,0,0,.06);
-    --head: #333; --head-btn: #444;
+    --code: #d63384; --code-bg: rgba(0,0,0,.06); --code-bg-hover: rgba(0,0,0,.12); --copied-bg: #d1e7dd;
+    --head: #333; --head-btn: #444; --head-btn-hover: #555; --head-line: #444;
+    --menu-bg: #fff; --menu-line: rgba(0,0,0,.15); --backdrop: rgba(0,0,0,.5); --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+    --card-shadow: 0 10px 30px rgba(0,0,0,.06);
+    --info-bg: #cff4fc; --info-line: #b6effb; --info-text: #055160;
+    --success-bg: #d1e7dd; --success-line: #badbcc; --success-text: #0f5132;
+    --warning-bg: #fff3cd; --warning-line: #ffecb5; --warning-text: #664d03;
+    --danger-bg: #f8d7da; --danger-line: #f5c2c7; --danger-text: #842029;
+    --res-head: #2c3e50; --score-bg: #2c3e50; --qcard: #f2f4f8; --qcard-h: #e9ecef; --track: #e9ecef;
+    --gate: #92400e; --progress-track: #e5e7eb; --log-text: #374151; --spinner-track: #cbd5e1; --divider-grip: #999;
+    --scroll-thumb: #c1c7cf;
     --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
     --mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
-  * { box-sizing: border-box; }
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    --accent-text: #a5b4fc; --accent-strong: #c7d2fe; --accent-soft: rgba(129,140,248,.14); --accent-soft-text: #c7d2fe;
+    --hero-a: #312e81; --hero-b: #4f46e5;
+    --bg: #0f1115; --surface: #171a21; --surface-2: #1d2129; --surface-3: #1a1e25; --hover: #2a303b;
+    --pre-bg: #12151b; --results-bg: #0f1115;
+    --ink: #f3f4f6; --text: #e3e6ea; --muted: #9aa3b2; --faint: #6b7280;
+    --line: #2c323d; --line-2: #2a2f39; --line-soft: #242933; --input-line: #3a414d;
+    --link: #6ea8fe; --ok-text: #4ade80; --warn-text: #fbbf24; --bad-text: #f87171;
+    --code: #f472b6; --code-bg: rgba(255,255,255,.08); --code-bg-hover: rgba(255,255,255,.14); --copied-bg: rgba(74,222,128,.18);
+    --head: #1f232b; --head-btn: #2e333d; --head-btn-hover: #3a404c; --head-line: #2e333d;
+    --menu-bg: #1d2129; --menu-line: rgba(255,255,255,.12); --backdrop: rgba(0,0,0,.65); --shadow: 0 .5rem 1.5rem rgba(0,0,0,.5);
+    --card-shadow: 0 10px 30px rgba(0,0,0,.35);
+    --info-bg: #032830; --info-line: #087990; --info-text: #6edff6;
+    --success-bg: #051b11; --success-line: #0f5132; --success-text: #75b798;
+    --warning-bg: #332701; --warning-line: #997404; --warning-text: #ffda6a;
+    --danger-bg: #2c0b0e; --danger-line: #842029; --danger-text: #ea868f;
+    --res-head: #e3e6ea; --score-bg: #334155; --qcard: #1a1e26; --qcard-h: #232833; --track: #2a303b;
+    --gate: #fbbf24; --progress-track: #2a303b; --log-text: #c9d1d9; --spinner-track: #3a414d; --divider-grip: #5a6170; --scroll-thumb: #3a414d;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --accent-text: #a5b4fc; --accent-strong: #c7d2fe; --accent-soft: rgba(129,140,248,.14); --accent-soft-text: #c7d2fe;
+    --hero-a: #312e81; --hero-b: #4f46e5;
+    --bg: #0f1115; --surface: #171a21; --surface-2: #1d2129; --surface-3: #1a1e25; --hover: #2a303b;
+    --pre-bg: #12151b; --results-bg: #0f1115;
+    --ink: #f3f4f6; --text: #e3e6ea; --muted: #9aa3b2; --faint: #6b7280;
+    --line: #2c323d; --line-2: #2a2f39; --line-soft: #242933; --input-line: #3a414d;
+    --link: #6ea8fe; --ok-text: #4ade80; --warn-text: #fbbf24; --bad-text: #f87171;
+    --code: #f472b6; --code-bg: rgba(255,255,255,.08); --code-bg-hover: rgba(255,255,255,.14); --copied-bg: rgba(74,222,128,.18);
+    --head: #1f232b; --head-btn: #2e333d; --head-btn-hover: #3a404c; --head-line: #2e333d;
+    --menu-bg: #1d2129; --menu-line: rgba(255,255,255,.12); --backdrop: rgba(0,0,0,.65); --shadow: 0 .5rem 1.5rem rgba(0,0,0,.5);
+    --card-shadow: 0 10px 30px rgba(0,0,0,.35);
+    --info-bg: #032830; --info-line: #087990; --info-text: #6edff6;
+    --success-bg: #051b11; --success-line: #0f5132; --success-text: #75b798;
+    --warning-bg: #332701; --warning-line: #997404; --warning-text: #ffda6a;
+    --danger-bg: #2c0b0e; --danger-line: #842029; --danger-text: #ea868f;
+    --res-head: #e3e6ea; --score-bg: #334155; --qcard: #1a1e26; --qcard-h: #232833; --track: #2a303b;
+    --gate: #fbbf24; --progress-track: #2a303b; --log-text: #c9d1d9; --spinner-track: #3a414d; --divider-grip: #5a6170; --scroll-thumb: #3a414d;
+    }
+  }
+  * { box-sizing: border-box; scrollbar-color: var(--scroll-thumb) transparent; }
   html, body { margin: 0; }
   body { font: 15px/1.5 var(--sans); color: var(--text); background: var(--bg); }
   button { font: inherit; }
-  a { color: var(--blue); }
+  a { color: var(--link); }
   code, pre { font-family: var(--mono); }
   .hidden { display: none !important; }
   .muted { color: var(--muted); }
@@ -45,21 +106,21 @@
   .btn-secondary { background: var(--grey); border-color: var(--grey); color: #fff; }
   .btn-secondary:hover:not(:disabled) { background: var(--grey-hover); }
   .btn-warning { background: var(--yellow); border-color: var(--yellow); color: #000; }
-  .btn-outline-warning { border-color: var(--yellow); color: #b58100; }
+  .btn-outline-warning { border-color: var(--yellow); color: var(--warn-text); }
   .btn-outline-warning:hover { background: var(--yellow); color: #000; }
-  .btn-outline-primary { border-color: var(--blue); color: var(--blue); }
-  .btn-outline-primary:hover:not(:disabled) { background: var(--blue); color: #fff; }
+  .btn-outline-primary { border-color: var(--link); color: var(--link); }
+  .btn-outline-primary:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
   .alert { padding: .75rem 1rem; border: 1px solid transparent; border-radius: .375rem; margin: 0 0 1rem; }
   .alert ul { margin: .25rem 0 0; padding-left: 1.2rem; }
   .alert p { margin: 0 0 .4rem; }
-  .alert-info { background: #cff4fc; border-color: #b6effb; color: #055160; }
-  .alert-success { background: #d1e7dd; border-color: #badbcc; color: #0f5132; }
-  .alert-warning { background: #fff3cd; border-color: #ffecb5; color: #664d03; }
-  .alert-danger { background: #f8d7da; border-color: #f5c2c7; color: #842029; white-space: pre-wrap; }
+  .alert-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-text); }
+  .alert-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success-text); }
+  .alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-text); }
+  .alert-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-text); white-space: pre-wrap; }
   /* a value in a task: pink, and a click copies it */
   code.ic { background: var(--code-bg); border-radius: 3px; padding: 2px 4px; font-size: .86em; color: var(--code); cursor: copy; overflow-wrap: anywhere; }
-  code.ic:hover { background: rgba(0,0,0,.12); }
-  code.ic.copied { background: #d1e7dd; color: var(--green); }
+  code.ic:hover { background: var(--code-bg-hover); }
+  code.ic.copied { background: var(--copied-bg); color: var(--ok-text); }
   .hardtag { font-size: 11px; background: var(--red); color: #fff; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
 
   /* ---- landing page ---- */
@@ -76,7 +137,7 @@
   .tpill:hover { border-color: #fff; color: #fff; }
   .tpill.sel { background: #fff; border-color: #fff; color: var(--indigo); font-weight: 600; }
   .hero { position: relative; overflow: hidden; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
-          text-align: center; padding: 64px 24px 72px; color: #fff; background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-light) 100%); }
+          text-align: center; padding: 64px 24px 72px; color: #fff; background: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%); }
   .hero::before { content: ""; position: absolute; inset: 0; opacity: .5;
                   background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px), radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
                   background-size: 48px 48px, 22px 22px; background-position: 0 0, 11px 11px; }
@@ -94,85 +155,85 @@
   .lastline a { color: #fff; font-weight: 600; }
   .scrollhint { position: absolute; bottom: 52px; left: 0; right: 0; font-size: 11px; letter-spacing: .14em; opacity: .75; }   /* above the first card, which overlaps the hero */
   .wrap { max-width: 1040px; margin: -36px auto 0; padding: 0 20px 40px; position: relative; z-index: 2; }
-  .card { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: 30px 34px; margin-bottom: 26px; }
+  .card { background: var(--surface); border-radius: 18px; box-shadow: var(--card-shadow); padding: 30px 34px; margin-bottom: 26px; }
   .section-title { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
   .section-title::after { content: ""; display: block; width: 46px; height: 4px; border-radius: 2px; background: var(--indigo); margin-top: 10px; }
   .section-sub { color: var(--muted); margin: 12px 0 18px; }
   .ladder { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px 14px; align-items: center; margin: 0 0 18px; }
   .rung { display: contents; }
   .rung .step { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
-                background: var(--indigo-soft); color: var(--indigo); }
+                background: var(--accent-soft); color: var(--accent-text); }
   .rung .where { color: var(--muted); font-size: 14px; }
   .rung.here .step { background: var(--indigo); color: #fff; }
-  .rung.here > span:nth-child(2) { font-weight: 700; color: var(--indigo-dark); }
-  .pathgo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 18px; border-radius: 12px; background: var(--indigo-soft); }
-  .pathgo .why { flex: 1; min-width: 240px; color: #312e81; font-size: 14px; }
+  .rung.here > span:nth-child(2) { font-weight: 700; color: var(--accent-strong); }
+  .pathgo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 18px; border-radius: 12px; background: var(--accent-soft); }
+  .pathgo .why { flex: 1; min-width: 240px; color: var(--accent-soft-text); font-size: 14px; }
   .dpills { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
-  .dpill { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer;
+  .dpill { text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 12px; padding: 12px 14px; cursor: pointer;
            transition: border-color .15s, transform .15s, box-shadow .15s; }
   .dpill:hover { border-color: var(--indigo-light); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(79,70,229,.12); }
-  .dpill b { font-family: var(--mono); color: var(--indigo); }
+  .dpill b { font-family: var(--mono); color: var(--accent-text); }
   .dpill .mk { float: right; font-weight: 700; color: var(--muted); }
-  .dpill.done .mk { color: var(--green); } .dpill.known .mk { color: var(--indigo); }
+  .dpill.done .mk { color: var(--ok-text); } .dpill.known .mk { color: var(--accent-text); }
   .dpill span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
-  .gate { margin-top: 14px; font-size: 14px; color: #92400e; }
+  .gate { margin-top: 14px; font-size: 14px; color: var(--gate); }
   /* objectives */
   .legend { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
   #objList h3 { margin: 22px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
   #objList h3 a { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 10px; }
-  details.obj { border-top: 1px solid #edf0f3; padding: 9px 0; font-size: 14px; }
+  details.obj { border-top: 1px solid var(--line-soft); padding: 9px 0; font-size: 14px; }
   details.obj > summary { cursor: pointer; display: grid; grid-template-columns: 18px 34px 1fr auto; gap: 8px; align-items: baseline; list-style: none; }
   details.obj > summary::-webkit-details-marker { display: none; }
-  details.obj > summary:hover .otext { color: var(--indigo); }
+  details.obj > summary:hover .otext { color: var(--accent-text); }
   details.obj[open] > summary { margin-bottom: 8px; }
   details.obj .oid { font-family: var(--mono); color: var(--muted); }
   .mk { font-family: var(--mono); font-weight: 700; text-align: center; }
-  .st-done, .st-passed { color: var(--green); } .st-started, .st-focus { color: #b58100; } .st-failed { color: var(--red); } .st-new { color: #9ca3af; } .st-known { color: var(--indigo); }
+  .st-done, .st-passed { color: var(--ok-text); } .st-started, .st-focus { color: var(--warn-text); } .st-failed { color: var(--bad-text); } .st-new { color: var(--faint); } .st-known { color: var(--accent-text); }
   .chips { font: 12px var(--mono); white-space: nowrap; color: var(--muted); }
   .chips span { margin-left: 6px; }
   .objrow { margin: 10px 0 6px; }
   .notes h4 { margin: 12px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
   .notes ul { margin: 0; padding-left: 18px; } .notes li { margin: 3px 0; }
   .notes code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--code); font-size: .9em; }
-  .notes pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.55; background: #f6f8fa; border: 1px solid var(--line); padding: 10px 12px; border-radius: 6px; }
+  .notes pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.55; background: var(--pre-bg); border: 1px solid var(--line); padding: 10px 12px; border-radius: 6px; color: var(--text); }
   .notes a { overflow-wrap: anywhere; }
   footer.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 10px 20px 34px; }
 
   /* ---- dialogs ---- */
-  .modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
-  .modal { background: #fff; border-radius: .5rem; width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); color: var(--text); }
+  .modal-back { position: fixed; inset: 0; z-index: 50; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 16px; }
+  .modal { background: var(--surface); border-radius: .5rem; width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow); color: var(--text); }
   .modal.wide { width: min(720px, 100%); }
   .modal .mh { display: flex; align-items: center; padding: 1rem 1rem; border-bottom: 1px solid var(--line); }
   .modal .mh h5 { margin: 0; font-size: 1.25rem; font-weight: 500; flex: 1; }
-  .modal .x { border: 0; background: none; font-size: 24px; line-height: 1; color: #6c757d; cursor: pointer; padding: 0 4px; }
+  .modal .x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
   .modal .mb { padding: 1rem; overflow-y: auto; }
   .modal .mf { display: flex; gap: 8px; justify-content: flex-end; padding: .75rem 1rem; border-top: 1px solid var(--line); }
   .field { margin-bottom: 1rem; }
   .field label.lbl { display: block; margin-bottom: .4rem; font-weight: 500; }
   select, textarea { font: inherit; }
-  .select { width: 100%; padding: .375rem 2.25rem .375rem .75rem; border: 1px solid #ced4da; border-radius: .375rem; background: #fff; color: var(--text); }
+  .select { width: 100%; padding: .375rem 2.25rem .375rem .75rem; border: 1px solid var(--input-line); border-radius: .375rem; background: var(--surface); color: var(--text); }
   .check { display: flex; gap: 8px; align-items: flex-start; }
   .check input { margin-top: 4px; }
   .picker { columns: 2; font-size: 13px; max-height: 38vh; overflow-y: auto; border: 1px solid var(--line); border-radius: .375rem; padding: 8px 10px; }
   .picker label { display: block; padding: 2px 0; break-inside: avoid; }
   /* preparing the environment */
-  .loading-card { background: #fff; border-radius: 16px; width: min(640px, 100%); padding: 30px 32px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
+  .loading-card { background: var(--surface); color: var(--text); border-radius: 16px; width: min(640px, 100%); padding: 30px 32px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
   .loading-card h2 { margin: 0 0 18px; font-size: 22px; color: var(--ink); }
-  .progress { height: 10px; border-radius: 10px; background: #e5e7eb; overflow: hidden; }
+  .progress { height: 10px; border-radius: 10px; background: var(--progress-track); overflow: hidden; }
   .progress span { display: block; height: 100%; width: 40%; border-radius: 10px; background: linear-gradient(90deg, var(--indigo), var(--indigo-light));
                    animation: slide 1.6s ease-in-out infinite; }
   @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
-  .loading-msg { margin: 14px 0 10px; font-family: var(--mono); font-size: 13px; color: var(--indigo-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .loading-msg { margin: 14px 0 10px; font-family: var(--mono); font-size: 13px; color: var(--accent-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .loading-card details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
-  pre.log { background: #f6f8fa; border: 1px solid var(--line); padding: 10px 12px; font-size: 12px; line-height: 1.5; max-height: 220px; overflow: auto; border-radius: 6px; color: #374151; margin: 8px 0 0; white-space: pre-wrap; }
+  pre.log { background: var(--pre-bg); border: 1px solid var(--line); padding: 10px 12px; font-size: 12px; line-height: 1.5; max-height: 220px; overflow: auto; border-radius: 6px; color: var(--log-text); margin: 8px 0 0; white-space: pre-wrap; }
   .loading-card .note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }
-  .spinner { width: 2.4rem; height: 2.4rem; border: .25em solid #cbd5e1; border-right-color: var(--blue); border-radius: 50%; animation: spin .75s linear infinite; margin: 6px auto 14px; }
+  .spinner { width: 2.4rem; height: 2.4rem; border: .25em solid var(--spinner-track); border-right-color: var(--blue); border-radius: 50%; animation: spin .75s linear infinite; margin: 6px auto 14px; }
   @keyframes spin { to { transform: rotate(360deg); } }
 
   /* ---- exam screen ---- */
-  #exam { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--head); color: #333; }
+  #exam { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--head); color: var(--text); }
   .xhead { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .5rem 1rem; background: var(--head);
-           color: #fff; border-bottom: 1px solid var(--head-btn); }
+           color: #fff; border-bottom: 1px solid var(--head-line); }
   .xtitlebox { display: flex; align-items: center; gap: 15px; min-width: 0; }
   .xtitle { font-size: 1.25rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .timer { padding: .25rem .5rem; background: rgba(255,255,255,.1); border-radius: .25rem; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; }
@@ -182,51 +243,54 @@
   .xmenus { display: flex; align-items: center; flex-shrink: 0; }
   .dd { position: relative; display: inline-block; }
   .btn-custom { background: var(--head-btn); color: #fff; border: 0; padding: .35rem .75rem; margin-left: .5rem; border-radius: .25rem; cursor: pointer; }
-  .btn-custom:hover { background: #555; }
+  .btn-custom:hover { background: var(--head-btn-hover); }
   .dd-toggle::after { content: ""; display: inline-block; margin-left: .45em; vertical-align: .2em; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }
-  .dd-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 220px; padding: .5rem 0; background: #fff;
-             border: 1px solid rgba(0,0,0,.15); border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
+  .dd-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 220px; padding: .5rem 0; background: var(--menu-bg);
+             border: 1px solid var(--menu-line); border-radius: .375rem; box-shadow: var(--shadow); }
   .dd-menu.open { display: block; }
   .dd-menu.left { left: 0; right: 0; max-height: 60vh; overflow-y: auto; }
-  .dd-item { display: block; width: 100%; text-align: left; padding: .3rem 1rem; border: 0; background: none; color: #212529; cursor: pointer; text-decoration: none; white-space: nowrap; }
+  .dd-item { display: block; width: 100%; text-align: left; padding: .3rem 1rem; border: 0; background: none; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; }
   .dd-menu.left .dd-item { white-space: normal; }
-  .dd-item:hover { background: #e9ecef; }
-  .dd-item.danger { color: var(--red); }
+  .dd-item:hover { background: var(--hover); }
+  .dd-item.danger { color: var(--bad-text); }
+  .dd-item.on { font-weight: 600; }
+  .dd-item.on::after { content: "  ✓"; color: var(--ok-text); }
+  .dd-head { padding: .25rem 1rem; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
   .dd-item .flag { color: var(--yellow); }
   .dd-item.pass::before, .dd-item.partial::before, .dd-item.fail::before { content: "●"; margin-right: 6px; }
   .dd-item.pass::before { color: var(--green); } .dd-item.partial::before { color: #e0a800; } .dd-item.fail::before { color: var(--red); }
-  .dd-sep { height: 0; margin: .5rem 0; border-top: 1px solid rgba(0,0,0,.15); }
+  .dd-sep { height: 0; margin: .5rem 0; border-top: 1px solid var(--menu-line); }
   .xmain { flex: 1; display: flex; min-height: 0; position: relative; overflow: hidden; }
-  .qpanel { width: 32%; min-width: 320px; max-width: 70%; background: #fff; display: flex; flex-direction: column; min-height: 0; }
-  .qnav { display: flex; padding: .5rem; background: #f5f5f5; border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
-  .nav-arrow { width: 35px; height: 35px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f8f9fa;
-               border: 1px solid var(--line-2); border-radius: 4px; font-weight: 700; cursor: pointer; color: #333; }
-  .nav-arrow:disabled { opacity: .5; cursor: not-allowed; background: #e9ecef; }
+  .qpanel { width: 32%; min-width: 320px; max-width: 70%; background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
+  .qnav { display: flex; padding: .5rem; background: var(--surface-3); border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
+  .nav-arrow { width: 35px; height: 35px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-2);
+               border: 1px solid var(--line-2); border-radius: 4px; font-weight: 700; cursor: pointer; color: var(--text); }
+  .nav-arrow:disabled { opacity: .5; cursor: not-allowed; background: var(--hover); }
   .qselect { flex: 1; margin: 0 .5rem; }
-  .qselect .dd-toggle { width: 100%; height: 35px; border: 0; background: #f8f9fa; border-radius: .375rem; cursor: pointer; color: #212529; }
-  .qselect .dd-toggle:hover { background: #e9ecef; }
+  .qselect .dd-toggle { width: 100%; height: 35px; border: 0; background: var(--surface-2); border-radius: .375rem; cursor: pointer; color: var(--text); }
+  .qselect .dd-toggle:hover { background: var(--hover); }
   .qcontent { flex: 1; overflow-y: auto; padding: 1.5rem; }
   .qhead .line { margin-bottom: .8rem; }
   .qhead .sub { margin-top: -.55rem; color: var(--muted); font-size: 13px; }
-  .tp { color: var(--blue); }
-  .qcontent hr { border: 0; border-top: 1px solid #dee2e6; margin: 1rem 0; }
-  .qtitle { font-size: 18px; margin: 0 0 .6rem; color: #212529; }
+  .tp { color: var(--link); }
+  .qcontent hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
+  .qtitle { font-size: 18px; margin: 0 0 .6rem; color: var(--ink); }
   .qbody p { margin: 0 0 12px; white-space: pre-wrap; }
   .checkrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; font-size: 13px; }
-  .checks { margin-top: 14px; background: #f8f9fa; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font-size: 14px; }
+  .checks { margin-top: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font-size: 14px; }
   .checks div { padding: 3px 0; }
   .checks .ok::before { content: "✓ "; color: var(--ok); font-weight: 700; } .checks .no::before { content: "✗ "; color: var(--bad); font-weight: 700; }
   .checks .pts { color: var(--muted); }
-  details.fold { margin-top: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; font-size: 14px; background: #fcfcfd; }
+  details.fold { margin-top: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; font-size: 14px; background: var(--surface-2); }
   details.fold summary { cursor: pointer; font-weight: 600; }
-  details.fold pre { margin: 8px 0 0; white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; background: #f6f8fa; border: 1px solid var(--line); padding: 12px; border-radius: 6px; }
-  .qactions { flex-shrink: 0; display: flex; gap: 8px; justify-content: space-between; align-items: stretch; padding: 10px 1rem; background: #fff; border-top: 1px solid var(--line-2); }
+  details.fold pre { margin: 8px 0 0; white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; background: var(--pre-bg); border: 1px solid var(--line); padding: 12px; border-radius: 6px; color: var(--text); }
+  .qactions { flex-shrink: 0; display: flex; gap: 8px; justify-content: space-between; align-items: stretch; padding: 10px 1rem; background: var(--surface); border-top: 1px solid var(--line-2); }
   .qactions .btn { white-space: normal; text-align: center; }   /* a narrow panel wraps the labels, as CK-X does, rather than the buttons */
-  .notepad { flex-shrink: 0; border-top: 1px solid var(--line-2); background: #fafafa; }
+  .notepad { flex-shrink: 0; border-top: 1px solid var(--line-2); background: var(--surface-2); }
   .notepad summary { cursor: pointer; padding: 8px 1.5rem; color: var(--muted); font-size: 13px; }
-  .notepad textarea { display: block; width: 100%; height: 120px; border: 0; border-top: 1px solid #eee; resize: vertical; padding: 10px 1.5rem; font: 13px/1.5 var(--mono); background: #fff; color: #212529; }
+  .notepad textarea { display: block; width: 100%; height: 120px; border: 0; border-top: 1px solid var(--line); resize: vertical; padding: 10px 1.5rem; font: 13px/1.5 var(--mono); background: var(--surface); color: var(--text); }
   .divider { width: 8px; flex-shrink: 0; background: var(--line-2); cursor: col-resize; position: relative; transition: background .2s; }
-  .divider::after { content: ""; position: absolute; top: 50%; left: 2px; width: 4px; height: 30px; margin-top: -15px; background: #999; border-radius: 2px; }
+  .divider::after { content: ""; position: absolute; top: 50%; left: 2px; width: 4px; height: 30px; margin-top: -15px; background: var(--divider-grip); border-radius: 2px; }
   .divider:hover, .divider.dragging { background: var(--divider); }
   .divider:hover::after, .divider.dragging::after { background: #fff; }
   .divider .hint { display: none; position: absolute; top: calc(50% + 24px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff;
@@ -244,45 +308,46 @@
   #noterm code { color: var(--yellow); }
 
   /* ---- results page ---- */
-  #results { min-height: 100vh; background: #f4f6f9; padding: 24px 16px 40px; }
+  #results { min-height: 100vh; background: var(--results-bg); padding: 24px 16px 40px; }
   .res-actions { max-width: 1000px; margin: 0 auto 18px; display: flex; flex-wrap: wrap; gap: 10px; }
-  .res-wrap { max-width: 1000px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 28px 30px; }
-  .res-header { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid #eee; padding-bottom: 14px; margin-bottom: 20px; }
-  .res-header h2 { margin: 0; font-size: 26px; color: #2c3e50; }
-  .res-header .meta { color: #666; font-size: 14px; text-align: right; }
-  .summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #f9f9f9; border-radius: 8px; padding: 18px 22px; margin-bottom: 20px; }
-  .summary h3 { margin: 0 0 8px; font-size: 16px; color: #333; font-weight: 600; }
+  .res-actions .dd { margin-left: auto; }
+  .res-wrap { max-width: 1000px; margin: 0 auto; background: var(--surface); border-radius: 10px; box-shadow: var(--card-shadow); padding: 28px 30px; }
+  .res-header { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 20px; }
+  .res-header h2 { margin: 0; font-size: 26px; color: var(--res-head); }
+  .res-header .meta { color: var(--muted); font-size: 14px; text-align: right; }
+  .summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--surface-2); border-radius: 8px; padding: 18px 22px; margin-bottom: 20px; }
+  .summary h3 { margin: 0 0 8px; font-size: 16px; color: var(--text); font-weight: 600; }
   .score-row { display: flex; align-items: center; gap: 16px; }
-  .score-box { background: #2c3e50; color: #fff; font-size: 22px; font-weight: 700; padding: 8px 18px; border-radius: 4px; font-variant-numeric: tabular-nums; }
-  .pct { font-size: 30px; font-weight: 800; color: #2c3e50; }
+  .score-box { background: var(--score-bg); color: #fff; font-size: 22px; font-weight: 700; padding: 8px 18px; border-radius: 4px; font-variant-numeric: tabular-nums; }
+  .pct { font-size: 30px; font-weight: 800; color: var(--res-head); }
   .rank-badge { padding: 8px 16px; border-radius: 4px; font-weight: 700; color: #fff; }
   .rank-high { background: var(--ok); } .rank-low { background: var(--bad); }
   .bars { margin: 0 0 18px; }
   .bar { display: grid; grid-template-columns: 76px 1fr 64px; gap: 10px; align-items: center; margin: 6px 0; font-size: 14px; }
-  .bar .track { height: 8px; background: #e9ecef; border-radius: 5px; overflow: hidden; }
+  .bar .track { height: 8px; background: var(--track); border-radius: 5px; overflow: hidden; }
   .bar .fill { height: 100%; background: var(--indigo); border-radius: 5px; }
   .bar span:first-child { font-family: var(--mono); }
   #resPath { font-size: 14px; margin-bottom: 20px; }
-  #resPath .milestone { color: var(--green); }
+  #resPath .milestone { color: var(--ok-text); }
   #resPath code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--code); }
-  .qcard { background: #f2f4f8; border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
-  .qcard-h { background: #e9ecef; padding: 11px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
-  .qcard-h h3 { margin: 0; font-size: 16px; color: #2c3e50; }
+  .qcard { background: var(--qcard); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
+  .qcard-h { background: var(--qcard-h); padding: 11px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
+  .qcard-h h3 { margin: 0; font-size: 16px; color: var(--res-head); }
   .qcard-h .qs { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
-  .qcard.t-pass .qs { color: var(--ok); } .qcard.t-partial .qs { color: #d68910; } .qcard.t-fail .qs { color: var(--bad); }
+  .qcard.t-pass .qs { color: var(--ok); } .qcard.t-partial .qs { color: var(--partial); } .qcard.t-fail .qs { color: var(--bad); }
   .vitems { list-style: none; margin: 0; padding: 0 16px; }
-  .vitem { display: flex; justify-content: space-between; gap: 12px; background: #fff; padding: 9px 12px; border-bottom: 1px solid #eef0f3; font-size: 14px; }
+  .vitem { display: flex; justify-content: space-between; gap: 12px; background: var(--surface); padding: 9px 12px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
   .vitems .vitem:first-child { margin-top: 12px; border-radius: 6px 6px 0 0; }
   .vitems .vitem:last-child { border-radius: 0 0 6px 6px; border-bottom: 0; }
   .vstat { font-weight: 700; } .vstat.ok { color: var(--ok); } .vstat.no { color: var(--bad); }
-  .qcard details.fold { margin: 12px 16px 16px; background: #fff; }
+  .qcard details.fold { margin: 12px 16px 16px; background: var(--surface); }
   .qcard .vitems + .pad { height: 14px; }
   /* history */
   .hist { width: 100%; border-collapse: collapse; font-size: 14px; }
-  .hist th, .hist td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
+  .hist th, .hist td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
   .hist th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
   .answers h4 { margin: 18px 0 6px; font-size: 15px; } .answers h4:first-child { margin-top: 0; }
-  .answers pre { margin: 0; white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; background: #f6f8fa; border: 1px solid var(--line); padding: 12px; border-radius: 6px; }
+  .answers pre { margin: 0; white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; background: var(--pre-bg); border: 1px solid var(--line); padding: 12px; border-radius: 6px; color: var(--text); }
 
   @media (prefers-reduced-motion: reduce) { .progress span, .spinner, .timer.warning { animation: none; } }
   @media (max-width: 900px) { .divider, .vnc { display: none; } .qpanel { width: 100% !important; max-width: none; } .xmenus .btn-custom { margin-left: .25rem; padding: .3rem .5rem; } }
@@ -299,6 +364,11 @@
     <span class="spacer"></span>
     <button class="navlink hidden" id="navResults">View results</button>
     <button class="navlink" id="navHistory">History</button>
+    <div class="dd">
+      <button class="navlink dd-toggle" id="themeBtn" aria-expanded="false" title="Light, dark, or follow your system">◐ Auto</button>
+      <div class="dd-menu"><div class="dd-head">Theme</div>
+        <button class="dd-item" data-theme-set="auto">Auto - follow the system</button><button class="dd-item" data-theme-set="light">Light</button><button class="dd-item" data-theme-set="dark">Dark</button></div>
+    </div>
     <span class="ver" id="ver"></span>
   </nav>
   <section class="hero">
@@ -347,6 +417,9 @@
           <button class="dd-item" data-act="resetPanels">Reset panel sizes</button>
           <div class="dd-sep"></div>
           <button class="dd-item" data-act="reconnect">Reconnect the remote desktop</button>
+          <div class="dd-sep"></div>
+          <div class="dd-head">Theme</div>
+          <button class="dd-item" data-theme-set="auto">Auto - follow the system</button><button class="dd-item" data-theme-set="light">Light</button><button class="dd-item" data-theme-set="dark">Dark</button>
         </div>
       </div>
       <div class="dd">
@@ -401,6 +474,10 @@
     <button class="btn btn-outline-primary" data-act="review">Review tasks</button>
     <button class="btn btn-outline-primary" data-act="history">History</button>
     <button class="btn btn-danger" data-act="terminate">Delete the hosts</button>
+    <div class="dd">
+      <button class="btn btn-outline-primary dd-toggle" aria-expanded="false">Theme</button>
+      <div class="dd-menu"><button class="dd-item" data-theme-set="auto">Auto - follow the system</button><button class="dd-item" data-theme-set="light">Light</button><button class="dd-item" data-theme-set="dark">Dark</button></div>
+    </div>
   </div>
   <div class="res-wrap">
     <div class="res-header"><h2 id="resTitle">Results</h2><div class="meta" id="resMeta"></div></div>
@@ -527,6 +604,18 @@
     const open = all.filter(d => !skipped.includes(d));
     return (open.length ? open : all).sort((a, b) => (drilled[a] || 0) - (drilled[b] || 0))[0];
   }
+  // ---- theme: auto (the system's), light or dark - kept in this browser ----
+  const THEME = {auto: '◐ Auto', light: '☀ Light', dark: '☾ Dark'};
+  function setTheme(t) {
+    if (t === 'auto') delete document.documentElement.dataset.theme; else document.documentElement.dataset.theme = t;
+    try { if (t === 'auto') localStorage.removeItem('ksim.theme'); else localStorage.setItem('ksim.theme', t); } catch (e) { /* this visit only */ }
+    paintTheme();
+  }
+  function paintTheme() {
+    const t = document.documentElement.dataset.theme || 'auto';
+    $$('[data-theme-set]').forEach(b => b.classList.toggle('on', b.dataset.themeSet === t));
+    $('#themeBtn').textContent = THEME[t];
+  }
   function setHard(v) {
     hard = !!v; $('#hardHero').checked = hard; $('#hardPicker').checked = hard;
     try { localStorage.setItem('ksim.hard', hard ? '1' : '0'); } catch (e) { /* not kept: fine */ }
@@ -971,6 +1060,8 @@
   document.addEventListener('click', e => {
     const t = e.target.closest('.dd-toggle');
     if (t) { const m = t.nextElementSibling, open = !m.classList.contains('open'); closeMenus(); if (open) { m.classList.add('open'); t.setAttribute('aria-expanded', 'true'); } return; }
+    const th = e.target.closest('[data-theme-set]');
+    if (th) { closeMenus(); setTheme(th.dataset.themeSet); return; }
     const a = e.target.closest('[data-act]');
     if (a) { closeMenus(); Promise.resolve(ACT[a.dataset.act]()).catch(err => alert(err.message)); return; }
     const c = e.target.closest('[data-close]');
@@ -1018,6 +1109,7 @@
     };
     addEventListener('mousemove', mv); addEventListener('mouseup', up);
   };
+  paintTheme();
   load().catch(e => lobbyError(e.message === 'Failed to fetch' ? 'Cannot reach ./ksim web - is it running?' : e.message));
 })();
 </script>