Upload 8 files

README.md

@@ -10,7 +10,7 @@ pinned: false
 
 # BOS AI Training Platform
 
-Six module course on using AI at BOS Security. Lessons are in `modules.py`, knowledge checks in `quizzes.py`, the tools by team reference in `teams.py`, the SVG diagrams in `figures.py`, and UI and styling in `app.py`. Upload `logo.png` alongside them.
+Six module course on using AI at BOS Security. Pages: an Overview with session progress, six modules, and a Tools by team reference. Progress lives in the browser session only and resets on reload. Lessons and key takeaways are in `modules.py`, knowledge checks in `quizzes.py`, the tools by team reference in `teams.py`, the SVG diagrams in `figures.py`, and UI and styling in `app.py`. Upload `logo.png` alongside them.
 
 To edit a module, change the matching entry in `MODULES` in `modules.py`. To change the help text shown at the bottom of every module, edit `IT_HELP`.
 

app.py

@@ -3,12 +3,16 @@ BOS AI Training Platform
 A guided, module based course on using AI at BOS Security, delivered as a
 HuggingFace Gradio Space.
 
-Content: modules.py (lessons), quizzes.py (knowledge checks), teams.py (tools by team).
-Logo: logo.png next to this file.
+Content: modules.py (lessons and takeaways), quizzes.py (knowledge checks),
+teams.py (tools by team), figures.py (SVG diagrams). Logo: logo.png.
+
+Pages: 0 = Overview, 1..N = modules, N+1 = Tools by team.
+Progress is kept per browser session (gr.State), not stored server side.
 """
 
 import base64
 import html
+import re
 from pathlib import Path
 
 import gradio as gr
@@ -25,7 +29,7 @@ TEAL_DEEP = "#0E7F78"
 INK = "#1B2430"
 MUTED = "#61707E"
 PAPER = "#FFFFFF"
-WASH = "#F4F7F9"
+WASH = "#F3F6F9"
 RULE = "#E1E8ED"
 MISS = "#C0563A"
 
@@ -35,91 +39,158 @@ if LOGO_PATH.exists():
     LOGO_SRC = "data:image/png;base64," + base64.b64encode(LOGO_PATH.read_bytes()).decode()
 
 N = len(MODULES)
-TEAM_PAGE = N  # index of the Tools by team page in the rail
+HOME, TEAM_PAGE = 0, N + 1
 MAXQ = max(len(q) for q in QUIZZES)
+TOTAL_Q = sum(len(q) for q in QUIZZES)
+
+
+def _minutes(m):
+    words = sum(len(re.sub(r"<[^>]+>", " ", s["body"]).split()) for s in m["sections"])
+    return max(3, round(words / 200) + 1)
+
+
+MINUTES = [_minutes(m) for m in MODULES]
 
 CSS = f"""
-:root {{ --blue: {BLUE}; --blue-deep: {BLUE_DEEP}; --teal: {TEAL}; --teal-deep: {TEAL_DEEP};
-         --ink: {INK}; --muted: {MUTED}; --paper: {PAPER}; --wash: {WASH}; --rule: {RULE}; --miss: {MISS}; }}
+:root {{ --blue: {BLUE}; --blue-deep: {BLUE_DEEP}; --teal: {TEAL}; --teal-deep: {TEAL_DEEP}; --ink: {INK}; --muted: {MUTED};
+         --paper: {PAPER}; --wash: {WASH}; --rule: {RULE}; --miss: {MISS};
+         --shadow: 0 1px 2px rgba(14,58,77,.05), 0 8px 24px -12px rgba(14,58,77,.18); }}
 * {{ font-family: Arial, Helvetica, sans-serif !important; }}
 body, .gradio-container {{ background: var(--wash) !important; color: var(--ink); }}
-.gradio-container {{ max-width: 1280px !important; margin: 0 auto !important; padding: 20px 20px 56px !important; }}
+.gradio-container {{ max-width: 1320px !important; margin: 0 auto !important; padding: 18px 22px 64px !important; }}
 footer {{ display: none !important; }}
-
-/* Masthead */
-.masthead {{ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
-             background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 26px; }}
-.masthead .brand {{ display: flex; align-items: center; gap: 22px; }}
-.masthead img {{ height: 52px; width: auto; display: block; }}
-.masthead .divider {{ width: 1px; height: 44px; background: var(--rule); }}
-.masthead h1 {{ margin: 0; font-size: 22px; font-weight: 700; color: var(--blue); letter-spacing: -0.01em; }}
-.masthead .tag {{ margin: 3px 0 0; font-size: 14px; color: var(--muted); }}
-.masthead .tool {{ font-size: 13px; color: var(--muted); padding: 8px 14px; border: 1px solid var(--rule);
-                   border-radius: 999px; background: var(--wash); }}
-.masthead .tool b {{ color: var(--blue); }}
-
-/* Progress bar */
-.track {{ height: 6px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: 14px 4px 4px; }}
-.track div {{ height: 100%; background: var(--teal); border-radius: 999px; transition: width .35s ease; }}
+.gradio-container .block, .gradio-container .form {{ box-shadow: none; }}
+@keyframes rise {{ from {{ opacity: 0; transform: translateY(8px); }} to {{ opacity: 1; transform: none; }} }}
+@media (prefers-reduced-motion: reduce) {{ *, *::before, *::after {{ animation: none !important; transition: none !important; }} }}
+
+/* Top bar */
+.topbar {{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
+           background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 22px; box-shadow: var(--shadow); }}
+.topbar .brand {{ display: flex; align-items: center; gap: 18px; }}
+.topbar img {{ height: 46px; width: auto; display: block; }}
+.topbar .divider {{ width: 1px; height: 38px; background: var(--rule); }}
+.topbar h1 {{ margin: 0; font-size: 19px; font-weight: 700; color: var(--blue); letter-spacing: -0.01em; }}
+.topbar .tag {{ margin: 2px 0 0; font-size: 13px; color: var(--muted); }}
+.topbar .right {{ display: flex; align-items: center; gap: 12px; }}
+.topbar .tool {{ font-size: 13px; color: var(--muted); padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--wash); }}
+.topbar .tool b {{ color: var(--blue); }}
+.rail .pct {{ margin: 12px 4px 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--teal-deep); padding: 9px 14px; border-radius: 10px; background: #E7F6F4; }}
+.track {{ height: 5px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: 12px 6px 6px; }}
+.track div {{ height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); border-radius: 999px; transition: width .45s cubic-bezier(.2,.8,.2,1); }}
 
 /* Rail */
-.rail {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 14px !important;
-         padding: 14px 10px !important; position: sticky; top: 16px; align-self: flex-start; gap: 4px !important; }}
-.rail .rail-head {{ padding: 4px 12px 10px; font-size: 13px; color: var(--muted); }}
-.rail .rail-sub {{ padding: 14px 12px 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 6px; }}
-.rail button {{ width: 100%; justify-content: flex-start !important; text-align: left !important;
-                padding: 12px 14px !important; margin: 0 !important; border-radius: 10px !important;
-                font-size: 15px !important; line-height: 1.35 !important; font-weight: 400 !important;
-                white-space: normal !important; transition: background .15s ease, color .15s ease, transform .1s ease; }}
+.rail {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; box-shadow: var(--shadow);
+         padding: 12px 10px 14px !important; position: sticky; top: 16px; align-self: flex-start; gap: 3px !important; }}
+.rail .rail-head {{ padding: 6px 12px 10px; font-size: 12.5px; color: var(--muted); }}
+.rail .rail-sub {{ padding: 14px 12px 6px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 8px; }}
+.rail button {{ width: 100%; justify-content: flex-start !important; text-align: left !important; padding: 11px 12px !important; margin: 0 !important;
+                border-radius: 10px !important; font-size: 14.5px !important; line-height: 1.35 !important; font-weight: 400 !important; white-space: normal !important;
+                transition: background .15s ease, color .15s ease, transform .1s ease; }}
 .rail button.secondary {{ background: transparent !important; border: 1px solid transparent !important; color: var(--ink) !important; box-shadow: none !important; }}
 .rail button.secondary:hover {{ background: var(--wash) !important; }}
-.rail button.primary {{ background: #E7F6F4 !important; border: 1px solid #C6EBE7 !important; color: var(--blue) !important;
-                        font-weight: 700 !important; box-shadow: none !important; }}
+.rail button.primary {{ background: #E7F6F4 !important; border: 1px solid #C6EBE7 !important; color: var(--blue) !important; font-weight: 700 !important; box-shadow: none !important; }}
+.rail button.stop {{ background: transparent !important; border: 1px solid transparent !important; color: var(--teal-deep) !important; box-shadow: none !important; }}
+.rail button.stop:hover {{ background: var(--wash) !important; }}
 .rail button:active {{ transform: scale(.985); }}
 .rail button:focus-visible {{ outline: 2px solid var(--teal) !important; outline-offset: 2px; }}
 
-/* Reading column */
-.reader {{ background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 44px 60px 36px;
-           animation: rise .28s ease both; }}
-@keyframes rise {{ from {{ opacity: 0; transform: translateY(6px); }} to {{ opacity: 1; transform: none; }} }}
-@media (prefers-reduced-motion: reduce) {{ .reader, .result {{ animation: none; }} .track div {{ transition: none; }} }}
-.reader .meta {{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }}
-.reader .pill {{ display: inline-block; padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: 12px;
-                 background: #E7F6F4; color: var(--teal-deep); }}
-.reader .pill.required {{ background: var(--blue); color: #fff; }}
-.reader h2 {{ font-size: 34px; line-height: 1.12; color: var(--blue); margin: 0 0 10px; letter-spacing: -0.02em; }}
-.reader .summary {{ font-size: 18px; color: var(--muted); margin: 0 0 32px; padding-bottom: 24px;
-                    border-bottom: 1px solid var(--rule); max-width: 64ch; line-height: 1.45; }}
-.reader h3 {{ font-size: 20px; color: var(--blue); margin: 36px 0 10px; letter-spacing: -0.01em; }}
+/* Cards shared */
+.card {{ background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); animation: rise .3s ease both; }}
+
+/* Overview */
+.hero {{ display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: center; padding: 44px 52px;
+         background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, #17667f 100%); color: #fff; border-color: transparent; }}
+.hero .eyebrow {{ font-size: 13px; color: #A9D8D3; font-weight: 700; margin: 0 0 10px; }}
+.hero h2 {{ font-size: 40px; line-height: 1.08; margin: 0 0 14px; letter-spacing: -0.02em; color: #fff; }}
+.hero p {{ font-size: 17px; line-height: 1.55; color: #D5E3EA; margin: 0 0 22px; max-width: 58ch; }}
+.hero .stats {{ display: flex; gap: 26px; flex-wrap: wrap; }}
+.hero .stat b {{ display: block; font-size: 22px; color: #fff; }}
+.hero .stat span {{ font-size: 13px; color: #A9C4D0; }}
+.hero .ring {{ display: flex; flex-direction: column; align-items: center; gap: 10px; }}
+.hero .ring svg {{ width: 160px; height: 160px; }}
+.hero .ring .label {{ font-size: 13px; color: #A9D8D3; }}
+.resume {{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; margin-top: 16px; border-left: 5px solid var(--teal); }}
+.resume .t {{ font-size: 13px; color: var(--muted); margin: 0 0 3px; }}
+.resume .n {{ font-size: 18px; font-weight: 700; color: var(--blue); margin: 0; }}
+.resume button {{ background: var(--teal); color: #fff; border: none; border-radius: 10px; padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s ease, transform .1s ease; }}
+.resume button:hover {{ background: var(--teal-deep); }}
+.resume button:active {{ transform: scale(.98); }}
+.grid-head {{ display: flex; align-items: baseline; justify-content: space-between; margin: 30px 4px 14px; }}
+.grid-head h3 {{ font-size: 20px; color: var(--blue); margin: 0; }}
+.grid-head span {{ font-size: 13.5px; color: var(--muted); }}
+.mgrid {{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }}
+.mcard {{ position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; background: var(--paper); border: 1px solid var(--rule);
+          border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; text-align: left; font: inherit; color: var(--ink);
+          transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; animation: rise .3s ease both; }}
+.mcard:hover {{ transform: translateY(-3px); border-color: #BFE3DF; box-shadow: 0 2px 4px rgba(14,58,77,.05), 0 16px 32px -14px rgba(14,58,77,.25); }}
+.mcard:focus-visible {{ outline: 2px solid var(--teal); outline-offset: 2px; }}
+.mcard .row {{ display: flex; align-items: center; justify-content: space-between; }}
+.mcard .num {{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; }}
+.mcard.done .num {{ background: var(--teal); }}
+.mcard .status {{ font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--wash); color: var(--muted); }}
+.mcard.done .status {{ background: #E7F6F4; color: var(--teal-deep); }}
+.mcard.required .status.req {{ background: var(--blue); color: #fff; }}
+.mcard h4 {{ margin: 6px 0 0; font-size: 18px; line-height: 1.25; color: var(--blue); letter-spacing: -0.01em; }}
+.mcard p {{ margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); flex: 1; }}
+.mcard .foot {{ display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--rule); }}
+.mcard .foot b {{ color: var(--teal-deep); font-weight: 700; }}
+.mcard.ref {{ background: linear-gradient(180deg, #F7FBFB, #EEF7F6); }}
+
+/* Reader */
+.reader {{ padding: 46px 64px 38px; }}
+.reader .meta {{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }}
+.pill {{ display: inline-block; padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: 12px; background: #E7F6F4; color: var(--teal-deep); }}
+.pill.required {{ background: var(--blue); color: #fff; }}
+.pill.done {{ background: var(--teal); color: #fff; }}
+.reader h2 {{ font-size: 36px; line-height: 1.1; color: var(--blue); margin: 0 0 12px; letter-spacing: -0.02em; }}
+.reader .summary {{ font-size: 18.5px; color: var(--muted); margin: 0 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); max-width: 62ch; line-height: 1.45; }}
+.reader h3 {{ font-size: 21px; color: var(--blue); margin: 38px 0 12px; letter-spacing: -0.01em; }}
 .reader h3:first-of-type {{ margin-top: 0; }}
-.reader p {{ font-size: 16.5px; line-height: 1.65; margin: 0 0 14px; max-width: 70ch; color: var(--ink); }}
+.reader p {{ font-size: 17px; line-height: 1.68; margin: 0 0 15px; max-width: 68ch; color: var(--ink); }}
 .reader p b {{ color: var(--blue); }}
-.reader .help {{ margin-top: 44px; padding: 20px 24px; background: var(--wash); border-radius: 12px; border-left: 4px solid var(--teal); }}
-.reader .help p {{ margin: 0; max-width: none; font-size: 15.5px; }}
-.reader .help p b {{ color: var(--teal-deep); }}
+.fig {{ margin: 24px 0 30px; padding: 24px 26px 16px; background: var(--wash); border: 1px solid var(--rule); border-radius: 14px; max-width: 760px; }}
+.fig svg {{ width: 100%; height: auto; display: block; }}
+.fig figcaption {{ margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }}
+.takeaways {{ margin-top: 44px; padding: 26px 30px; border-radius: 14px; background: linear-gradient(135deg, #EEF7F6, #F7FBFB); border: 1px solid #CFEAE7; max-width: 760px; }}
+.takeaways h3 {{ margin: 0 0 14px !important; font-size: 17px !important; color: var(--teal-deep) !important; }}
+.takeaways ol {{ margin: 0; padding-left: 0; list-style: none; counter-reset: t; }}
+.takeaways li {{ counter-increment: t; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.55; margin-bottom: 10px; color: var(--ink); }}
+.takeaways li::before {{ content: counter(t); width: 26px; height: 26px; border-radius: 8px; background: var(--teal); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; margin-top: 1px; }}
+.help {{ margin-top: 22px; padding: 18px 22px; background: var(--wash); border-radius: 12px; border-left: 4px solid var(--blue); max-width: 760px; }}
+.help p {{ margin: 0; max-width: none; font-size: 15px; }}
+.help p b {{ color: var(--blue); }}
 
 /* Quiz */
-.quiz {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 14px !important;
-         padding: 28px 36px 26px !important; margin-top: 16px; gap: 6px !important; }}
-.quiz .qhead h3 {{ font-size: 20px; color: var(--blue); margin: 0 0 4px; }}
-.quiz .qhead p {{ color: var(--muted); font-size: 15px; margin: 0 0 12px; max-width: 70ch; }}
+.quiz {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; box-shadow: var(--shadow);
+         padding: 30px 40px 28px !important; margin-top: 16px; gap: 4px !important; }}
+.quiz .qhead {{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }}
+.quiz .qhead h3 {{ font-size: 21px; color: var(--blue); margin: 0; }}
+.quiz .qhead span {{ font-size: 13px; color: var(--muted); }}
+.quiz .qsub {{ color: var(--muted); font-size: 15px; margin: 0 0 8px; max-width: 70ch; }}
+.quiz, .quiz .block, .quiz .form, .quiz fieldset, .quiz .wrap {{ background: var(--paper) !important; color: var(--ink) !important; }}
+.quiz .block, .quiz .form {{ border: none !important; box-shadow: none !important; padding: 12px 0 6px !important; margin: 0 !important; }}
 .quiz fieldset {{ border: none !important; padding: 0 !important; margin: 0 !important; }}
-.quiz .block {{ border: none !important; background: transparent !important; padding: 6px 0 !important; box-shadow: none !important; }}
-.quiz span[data-testid="block-info"] {{ font-size: 16px !important; font-weight: 700 !important; color: var(--ink) !important;
-                                         margin-bottom: 10px !important; display: block; line-height: 1.4; }}
-.quiz .wrap {{ display: flex; flex-direction: column; gap: 6px !important; }}
-.quiz .wrap label {{ display: flex !important; align-items: center; gap: 12px; padding: 11px 14px !important;
-                      border: 1px solid var(--rule) !important; border-radius: 10px !important; background: var(--paper) !important;
-                      cursor: pointer; font-size: 15px; box-shadow: none !important; transition: border-color .12s ease, background .12s ease; }}
-.quiz .wrap label:hover {{ border-color: var(--teal) !important; }}
-.quiz .wrap label.selected {{ border-color: var(--teal) !important; background: #E7F6F4 !important; color: var(--blue); }}
-.quiz .wrap label input {{ accent-color: var(--teal); }}
-.quiz .wrap label span {{ white-space: normal !important; }}
-.quiz .check {{ background: var(--blue) !important; border: 1px solid var(--blue) !important; color: #fff !important; box-shadow: none !important;
-                border-radius: 10px !important; font-weight: 700 !important; padding: 12px 22px !important; margin-top: 8px; width: auto; }}
+.quiz span[data-testid="block-info"], .quiz .block > label > span, .quiz legend {{ font-size: 16.5px !important; font-weight: 700 !important; color: var(--ink) !important;
+                                                                                 background: transparent !important; margin-bottom: 10px !important; display: block; line-height: 1.4; }}
+.quiz .wrap {{ display: flex; flex-direction: column; gap: 7px !important; }}
+.quiz .wrap label {{ display: flex !important; align-items: center; gap: 12px; padding: 12px 15px !important; border: 1px solid var(--rule) !important; border-radius: 10px !important;
+                      background: var(--paper) !important; cursor: pointer; font-size: 15px; box-shadow: none !important; transition: border-color .12s ease, background .12s ease, transform .08s ease; }}
+.quiz .wrap label:hover {{ border-color: var(--teal) !important; background: #FAFDFD !important; }}
+.quiz .wrap label:active {{ transform: scale(.995); }}
+.quiz .wrap label.selected {{ border-color: var(--teal) !important; background: #E7F6F4 !important; }}
+.quiz .wrap label, .quiz .wrap label span, .quiz .wrap label * {{ color: var(--ink) !important; }}
+.quiz .wrap label.selected span {{ color: var(--blue) !important; font-weight: 700; }}
+.quiz .wrap label input[type="radio"] {{ appearance: auto !important; -webkit-appearance: radio !important; width: 18px; height: 18px; margin: 0; accent-color: var(--teal);
+                                          background: #fff !important; border: 1px solid var(--muted) !important; border-radius: 50% !important; box-shadow: none !important; }}
+.quiz .check {{ background: var(--blue) !important; border: 1px solid var(--blue) !important; color: #fff !important; box-shadow: none !important; border-radius: 10px !important;
+                font-weight: 700 !important; padding: 13px 24px !important; margin-top: 10px; width: auto; transition: background .15s ease, transform .1s ease; }}
 .quiz .check:hover {{ background: var(--blue-deep) !important; }}
-.result {{ margin-top: 12px; animation: rise .25s ease both; }}
-.result .score {{ font-size: 18px; font-weight: 700; color: var(--blue); margin: 0 0 12px; }}
+.quiz .check:active {{ transform: scale(.98); }}
+.result {{ margin-top: 14px; animation: rise .25s ease both; }}
+.result .scorecard {{ display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 12px; background: var(--wash); margin-bottom: 14px; }}
+.result .scorecard svg {{ width: 64px; height: 64px; flex: none; }}
+.result .scorecard .s1 {{ font-size: 18px; font-weight: 700; color: var(--blue); margin: 0 0 2px; }}
+.result .scorecard .s2 {{ font-size: 14px; color: var(--muted); margin: 0; }}
 .result .item {{ padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; font-size: 15px; line-height: 1.5; }}
 .result .item.ok {{ background: #E7F6F4; border-left: 4px solid var(--teal); }}
 .result .item.miss {{ background: #FBEFEA; border-left: 4px solid var(--miss); }}
@@ -129,39 +200,19 @@ footer {{ display: none !important; }}
 .result .warn {{ color: var(--miss); font-weight: 700; }}
 
 /* Tools by team */
-.teamwrap .tabs {{ margin-top: 12px; background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 14px !important; padding: 10px 40px 32px !important; }}
-.teamwrap .tabs button {{ font-size: 15px !important; font-weight: 700 !important; color: var(--muted) !important; border: none !important;
-                           border-bottom: 3px solid transparent !important; border-radius: 0 !important; padding: 14px 18px !important;
-                           background: transparent !important; box-shadow: none !important; }}
+.teamwrap .tabs {{ margin-top: 14px; background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; box-shadow: var(--shadow); padding: 10px 44px 34px !important; }}
+.teamwrap .tabs button {{ font-size: 15px !important; font-weight: 700 !important; color: var(--muted) !important; border: none !important; border-bottom: 3px solid transparent !important;
+                           border-radius: 0 !important; padding: 14px 18px !important; background: transparent !important; box-shadow: none !important; }}
 .teamwrap .tabs button.selected {{ color: var(--blue) !important; border-bottom-color: var(--teal) !important; }}
-.teamwrap .tab-nav {{ border-bottom: 1px solid var(--rule) !important; gap: 2px; }}
-.teamwrap .tab-nav button {{ font-size: 15px !important; font-weight: 700 !important; color: var(--muted) !important; border: none !important;
-                              border-bottom: 3px solid transparent !important; border-radius: 0 !important; padding: 12px 18px !important;
-                              background: transparent !important; box-shadow: none !important; }}
-.teamwrap .tab-nav button.selected {{ color: var(--blue) !important; border-bottom-color: var(--teal) !important; }}
 .teamwrap .tabitem {{ border: none !important; padding: 4px 0 0 !important; background: transparent !important; }}
 .teamwrap .tabitem h3 {{ font-size: 19px; color: var(--blue); margin: 26px 0 8px; }}
-.teamwrap .tabitem h3:first-child {{ margin-top: 10px; }}
-.teamwrap .tabitem p {{ font-size: 16px; line-height: 1.65; margin: 0 0 12px; max-width: 72ch; color: var(--ink); }}
+.teamwrap .tabitem h3:first-child {{ margin-top: 12px; }}
+.teamwrap .tabitem p {{ font-size: 16.5px; line-height: 1.65; margin: 0 0 12px; max-width: 72ch; color: var(--ink); }}
 .teamwrap .tabitem p b {{ color: var(--blue); }}
 
-/* Figures */
-.fig {{ margin: 22px 0 28px; padding: 22px 24px 14px; background: var(--wash); border: 1px solid var(--rule); border-radius: 12px; max-width: 760px; }}
-.fig svg {{ width: 100%; height: auto; display: block; }}
-.fig figcaption {{ margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }}
-
-/* Quiz contrast: override dark theme and block chrome no matter what the host sets */
-.quiz, .quiz .block, .quiz .form, .quiz fieldset, .quiz .wrap {{ background: var(--paper) !important; color: var(--ink) !important; }}
-.quiz .block, .quiz .form {{ border: none !important; box-shadow: none !important; padding: 10px 0 6px !important; margin: 0 !important; }}
-.quiz span[data-testid="block-info"], .quiz .block > label > span, .quiz legend {{ color: var(--ink) !important; background: transparent !important; }}
-.quiz .wrap label, .quiz .wrap label span, .quiz .wrap label * {{ color: var(--ink) !important; }}
-.quiz .wrap label input[type="radio"] {{ appearance: auto !important; -webkit-appearance: radio !important; width: 18px; height: 18px; margin: 0; accent-color: var(--teal); background: #fff !important; border: 1px solid var(--muted) !important; border-radius: 50% !important; box-shadow: none !important; }}
-.quiz .wrap label.selected span {{ color: var(--blue) !important; font-weight: 700; }}
-
 /* Nav */
 .navrow {{ margin-top: 14px; align-items: center; }}
-.navrow button {{ border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important;
-                  padding: 12px 20px !important; transition: background .15s ease, transform .1s ease; }}
+.navrow button {{ border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important; padding: 13px 22px !important; transition: background .15s ease, transform .1s ease; }}
 .navrow button:active {{ transform: scale(.98); }}
 .navrow .primary {{ background: var(--teal) !important; border: 1px solid var(--teal) !important; color: #fff !important; box-shadow: none !important; }}
 .navrow .primary:hover {{ background: var(--teal-deep) !important; }}
@@ -169,25 +220,138 @@ footer {{ display: none !important; }}
 .navrow .secondary:hover {{ background: var(--wash) !important; }}
 .progress {{ text-align: center; color: var(--muted); font-size: 14px; }}
 
-@media (max-width: 900px) {{
-  .rail {{ position: static; }}
-  .reader {{ padding: 28px 22px; }}
-  .quiz {{ padding: 22px 20px !important; }}
-  .reader h2 {{ font-size: 27px; }}
-  .masthead .divider {{ display: none; }}
+@media (max-width: 1000px) {{ .mgrid {{ grid-template-columns: repeat(2, 1fr); }} .hero {{ grid-template-columns: 1fr; padding: 32px; }} .hero .ring {{ display: none; }} }}
+@media (max-width: 720px) {{
+  .rail {{ position: static; }} .mgrid {{ grid-template-columns: 1fr; }}
+  .reader {{ padding: 28px 22px; }} .quiz {{ padding: 22px 20px !important; }} .teamwrap .tabs {{ padding: 8px 18px 24px !important; }}
+  .reader h2 {{ font-size: 28px; }} .hero h2 {{ font-size: 30px; }} .topbar .divider {{ display: none; }}
 }}
 """
 
+FORCE_LIGHT = """
+() => {
+  const strip = () => {
+    document.body.classList.remove('dark');
+    document.documentElement.classList.remove('dark');
+    document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
+  };
+  strip();
+  new MutationObserver(strip).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+}
+"""
+
+THEME = gr.themes.Default(primary_hue="teal", neutral_hue="slate").set(
+    body_background_fill=WASH, body_background_fill_dark=WASH,
+    block_background_fill=PAPER, block_background_fill_dark=PAPER,
+    block_label_text_color=INK, block_label_text_color_dark=INK,
+    body_text_color=INK, body_text_color_dark=INK,
+    border_color_primary=RULE, border_color_primary_dark=RULE,
+    checkbox_label_background_fill=PAPER, checkbox_label_background_fill_dark=PAPER,
+    checkbox_label_background_fill_selected="#E7F6F4", checkbox_label_background_fill_selected_dark="#E7F6F4",
+    checkbox_label_text_color=INK, checkbox_label_text_color_dark=INK,
+    checkbox_label_text_color_selected=BLUE, checkbox_label_text_color_selected_dark=BLUE,
+    checkbox_background_color=PAPER, checkbox_background_color_dark=PAPER,
+    checkbox_background_color_selected=TEAL, checkbox_background_color_selected_dark=TEAL,
+    checkbox_border_color=MUTED, checkbox_border_color_dark=MUTED,
+)
+
 
 # Rendering helpers
 
-def render_module(idx: int) -> str:
+def ring(pct: int, size=160, stroke=12, track="rgba(255,255,255,.18)", color=TEAL, text_color="#fff", sub=""):
+    r = (size - stroke) / 2
+    c = 2 * 3.14159 * r
+    dash = c * pct / 100
+    sub_el = f'<text x="50%" y="66%" text-anchor="middle" font-size="{size*0.085}" fill="{text_color}" opacity=".75" font-family="Arial">{html.escape(sub)}</text>' if sub else ""
+    return (
+        f'<svg viewBox="0 0 {size} {size}" role="img" aria-label="{pct} percent complete">'
+        f'<circle cx="{size/2}" cy="{size/2}" r="{r}" fill="none" stroke="{track}" stroke-width="{stroke}"/>'
+        f'<circle cx="{size/2}" cy="{size/2}" r="{r}" fill="none" stroke="{color}" stroke-width="{stroke}" stroke-linecap="round" '
+        f'stroke-dasharray="{dash:.1f} {c:.1f}" transform="rotate(-90 {size/2} {size/2})" style="transition:stroke-dasharray .6s ease"/>'
+        f'<text x="50%" y="{"52%" if sub else "50%"}" dominant-baseline="middle" text-anchor="middle" font-size="{size*0.21}" font-weight="700" fill="{text_color}" font-family="Arial">{pct}%</text>'
+        f"{sub_el}</svg>"
+    )
+
+
+def pct_done(progress: dict) -> int:
+    return round(100 * len(progress) / N)
+
+
+def figure(svg_markup: str, caption: str) -> str:
+    return f'<figure class="fig">{svg_markup}<figcaption>{html.escape(caption)}</figcaption></figure>'
+
+
+def render_home(progress: dict) -> str:
+    done = len(progress)
+    pct = pct_done(progress)
+    next_idx = next((i for i in range(N) if i not in progress), None)
+    total_min = sum(MINUTES)
+    parts = [f"""
+<div class="card hero">
+  <div>
+    <p class="eyebrow">BOS Security company training</p>
+    <h2>Using AI well, and safely, at BOS</h2>
+    <p>Six short modules that build on each other: what AI is, how it works, how to get real results from Claude Enterprise, and where the hard lines on client and company data sit. Each module ends with a knowledge check.</p>
+    <div class="stats">
+      <div class="stat"><b>{N}</b><span>modules</span></div>
+      <div class="stat"><b>{total_min} min</b><span>total reading</span></div>
+      <div class="stat"><b>{TOTAL_Q}</b><span>check questions</span></div>
+      <div class="stat"><b>{done} of {N}</b><span>completed</span></div>
+    </div>
+  </div>
+  <div class="ring">{ring(pct, sub="complete")}<span class="label">Progress this session</span></div>
+</div>"""]
+    if next_idx is not None:
+        m = MODULES[next_idx]
+        label = "Start here" if done == 0 else "Continue where you left off"
+        parts.append(f"""
+<div class="card resume">
+  <div><p class="t">{label}</p><p class="n">Module {next_idx + 1}. {html.escape(m['title'])}</p></div>
+  <button type="button" onclick="document.getElementById('rail-{next_idx + 1}').click()">{'Begin module' if done == 0 else 'Resume'}</button>
+</div>""")
+    else:
+        parts.append("""
+<div class="card resume">
+  <div><p class="t">All modules completed</p><p class="n">You have completed the BOS AI training path. Keep the Tools by team page handy.</p></div>
+  <button type="button" onclick="document.getElementById('rail-team').click()">Open Tools by team</button>
+</div>""")
+    parts.append(f'<div class="grid-head"><h3>Learning path</h3><span>Read in order. Each module builds on the one before it.</span></div><div class="mgrid">')
+    for i, m in enumerate(MODULES):
+        is_done = i in progress
+        req = m["depth"].lower() == "required"
+        cls = "mcard" + (" done" if is_done else "") + (" required" if req else "")
+        if is_done:
+            status = f'<span class="status">Scored {progress[i][0]} of {progress[i][1]}</span>'
+        elif req:
+            status = '<span class="status req">Required</span>'
+        else:
+            status = f'<span class="status">{html.escape(m["depth"])}</span>'
+        parts.append(f"""
+<button type="button" class="{cls}" style="animation-delay:{i*40}ms" onclick="document.getElementById('rail-{i + 1}').click()">
+  <div class="row"><span class="num">{'&#10003;' if is_done else i + 1}</span>{status}</div>
+  <h4>{html.escape(m['title'])}</h4>
+  <p>{html.escape(m['summary'])}</p>
+  <div class="foot"><span>{MINUTES[i]} min read</span><b>{len(QUIZZES[i])} questions</b></div>
+</button>""")
+    parts.append(f"""
+<button type="button" class="mcard ref" style="animation-delay:{N*40}ms" onclick="document.getElementById('rail-team').click()">
+  <div class="row"><span class="num" style="background:var(--teal-deep)">&#9776;</span><span class="status">Reference</span></div>
+  <h4>Tools by team</h4>
+  <p>Where Claude fits next to Zoho, Apollo, and Microsoft 365 for Staffing, Security, Sales, and VirtuGuard.</p>
+  <div class="foot"><span>4 teams</span><b>Open any time</b></div>
+</button></div>""")
+    return "\n".join(parts)
+
+
+def render_module(idx: int, progress: dict) -> str:
     m = MODULES[idx]
-    pill_cls = "pill required" if m["depth"].lower() == "required" else "pill"
+    req = m["depth"].lower() == "required"
+    pills = f'<span class="pill{" required" if req else ""}">{html.escape(m["depth"])}</span>'
+    if idx in progress:
+        pills += f'<span class="pill done">Scored {progress[idx][0]} of {progress[idx][1]}</span>'
     parts = [
-        '<div class="reader">',
-        f'<div class="meta"><span class="{pill_cls}">{html.escape(m["depth"])}</span>'
-        f'<span>Module {idx + 1} of {N}</span></div>',
+        '<div class="card reader">',
+        f'<div class="meta">{pills}<span>Module {idx + 1} of {N}</span><span>{MINUTES[idx]} min read</span></div>',
         f'<h2>{html.escape(m["title"])}</h2>',
         f'<p class="summary">{html.escape(m["summary"])}</p>',
     ]
@@ -197,40 +361,62 @@ def render_module(idx: int) -> str:
         fig = FIGURES.get((idx, s["heading"]))
         if fig:
             parts.append(figure(*fig))
+    parts.append('<div class="takeaways"><h3>Key takeaways</h3><ol>' + "".join(f"<li>{html.escape(t)}</li>" for t in m["takeaways"]) + "</ol></div>")
     parts.append(f'<div class="help"><p><b>Need help?</b> {html.escape(IT_HELP)}</p></div>')
     parts.append("</div>")
     return "\n".join(parts)
 
 
-def figure(svg_markup: str, caption: str) -> str:
-    return f'<figure class="fig">{svg_markup}<figcaption>{html.escape(caption)}</figcaption></figure>'
-
-
 def render_team_header() -> str:
     return (
-        '<div class="reader" style="padding-bottom:20px">'
+        '<div class="card reader" style="padding-bottom:22px">'
         '<div class="meta"><span class="pill">Reference</span><span>Tools by team</span></div>'
         "<h2>Where Claude fits next to Zoho, Apollo, and Microsoft 365</h2>"
         f"{TEAMS_INTRO}{figure(*TEAM_FIGURE)}</div>"
     )
 
 
-def track(idx: int) -> str:
-    pct = 100 if idx >= N else round((idx + 1) / N * 100)
-    return f'<div class="track"><div style="width:{pct}%"></div></div>'
+def track(idx: int, progress: dict) -> str:
+    return f'<div class="track"><div style="width:{pct_done(progress)}%"></div></div>'
+
+
+def pct_badge(progress: dict) -> str:
+    return f'<div class="pct">{pct_done(progress)}% complete</div>'
+
 
+def progress_text(page: int) -> str:
+    if page == HOME:
+        return '<div class="progress">Overview</div>'
+    if page == TEAM_PAGE:
+        return '<div class="progress">Reference</div>'
+    return f'<div class="progress">Module {page} of {N}</div>'
 
-def progress_text(idx: int) -> str:
-    return '<div class="progress">Reference</div>' if idx >= N else f'<div class="progress">{idx + 1} of {N}</div>'
 
+def rail_labels(progress: dict):
+    labels = ["Overview"]
+    for i, m in enumerate(MODULES):
+        mark = "\u2713  " if i in progress else ""
+        labels.append(f"{mark}{i + 1}.  {m['title']}")
+    labels.append("Tools by team")
+    return labels
 
-def rail_updates(idx: int):
-    return [gr.update(variant="primary" if i == idx else "secondary") for i in range(N + 1)]
 
+def rail_updates(page: int, progress: dict):
+    labels = rail_labels(progress)
+    out = []
+    for i, lab in enumerate(labels):
+        if i == page:
+            variant = "primary"
+        elif 1 <= i <= N and (i - 1) in progress:
+            variant = "stop"
+        else:
+            variant = "secondary"
+        out.append(gr.update(value=lab, variant=variant))
+    return out
 
-def quiz_updates(idx: int):
-    """Return updates for the MAXQ radio components for module idx."""
-    qs = QUIZZES[idx] if idx < N else []
+
+def quiz_updates(page: int):
+    qs = QUIZZES[page - 1] if 1 <= page <= N else []
     out = []
     for i in range(MAXQ):
         if i < len(qs):
@@ -240,128 +426,101 @@ def quiz_updates(idx: int):
     return out
 
 
-def grade(idx: int, *answers) -> str:
+def quiz_head(page: int) -> str:
+    n = len(QUIZZES[page - 1]) if 1 <= page <= N else 0
+    return (f'<div class="qhead"><h3>Knowledge check</h3><span>{n} questions</span></div>'
+            '<p class="qsub">Pick one answer per question, then check. Anything you miss shows the correct answer and why. '
+            'Checking your answers marks the module complete for this session; you can retake it any time.</p>')
+
+
+def show(page: int, progress: dict):
+    page = max(HOME, min(TEAM_PAGE, page))
+    on_home, on_team = page == HOME, page == TEAM_PAGE
+    on_module = not on_home and not on_team
+    next_label = "Start module 1" if on_home else ("Tools by team" if page == N else "Next module")
+    return [
+        page,
+        gr.update(visible=on_home),
+        gr.update(visible=on_module),
+        gr.update(visible=on_team),
+        render_home(progress) if on_home else "",
+        render_module(page - 1, progress) if on_module else "",
+        track(page, progress),
+        pct_badge(progress),
+        progress_text(page),
+        gr.update(interactive=page > HOME, value="Overview" if page == 1 else "Previous module"),
+        gr.update(interactive=page < TEAM_PAGE, value=next_label),
+        quiz_head(page),
+        "",
+        *rail_updates(page, progress),
+        *quiz_updates(page),
+    ]
+
+
+def grade(page: int, progress: dict, *answers):
+    idx = page - 1
     qs = QUIZZES[idx]
     unanswered = [i + 1 for i, a in enumerate(answers[: len(qs)]) if a is None]
     if unanswered:
         nums = ", ".join(str(n) for n in unanswered)
-        return f'<div class="result"><p class="warn">Answer question {nums} before checking.</p></div>'
-    items = []
-    correct = 0
+        word = "question" if len(unanswered) == 1 else "questions"
+        return [progress, f'<div class="result"><p class="warn">Answer {word} {nums} before checking.</p></div>',
+                gr.update(), gr.update(), gr.update(), *[gr.update() for _ in range(N + 2)]]
+    items, correct = [], 0
     for i, q in enumerate(qs):
-        chosen = answers[i]
-        right = q["options"][q["answer"]]
+        chosen, right = answers[i], q["options"][q["answer"]]
         if chosen == right:
             correct += 1
-            items.append(
-                f'<div class="item ok"><p><b>Question {i + 1}.</b> Correct.</p>'
-                f'<p>{html.escape(right)}</p></div>'
-            )
+            items.append(f'<div class="item ok"><p><b>Question {i + 1}.</b> Correct.</p><p>{html.escape(right)}</p></div>')
         else:
-            items.append(
-                f'<div class="item miss"><p><b>Question {i + 1}.</b> Not quite. You chose: {html.escape(chosen)}</p>'
-                f'<p><b>Correct answer:</b> {html.escape(right)}</p>'
-                f'<p>{html.escape(q["why"])}</p></div>'
-            )
-    score = f'<p class="score">You got {correct} of {len(qs)} right.</p>'
+            items.append(f'<div class="item miss"><p><b>Question {i + 1}.</b> Not quite. You chose: {html.escape(chosen)}</p>'
+                         f'<p><b>Correct answer:</b> {html.escape(right)}</p><p>{html.escape(q["why"])}</p></div>')
+    pct = round(100 * correct / len(qs))
+    progress = dict(progress)
+    progress[idx] = (correct, len(qs))
     if correct == len(qs):
-        score = f'<p class="score">All {len(qs)} correct. Move on to the next module.</p>'
-    return f'<div class="result">{score}{"".join(items)}</div>'
-
+        s1, s2 = f"All {len(qs)} correct.", "Module marked complete. Move on when you are ready."
+    else:
+        s1, s2 = f"{correct} of {len(qs)} right.", "Read the explanations below, then move on. You can retake the check any time."
+    card = (f'<div class="scorecard">{ring(pct, size=64, stroke=7, track="#E1E8ED", color=TEAL if pct == 100 else BLUE, text_color=BLUE)}'
+            f'<div><p class="s1">{s1}</p><p class="s2">{s2}</p></div></div>')
+    result = f'<div class="result">{card}{"".join(items)}</div>'
+    return [progress, result, track(page, progress), pct_badge(progress),
+            render_module(idx, progress), *rail_updates(page, progress)]
 
-def show(idx: int):
-    idx = max(0, min(TEAM_PAGE, idx))
-    on_module = idx < N
-    return [
-        idx,
-        gr.update(visible=on_module),          # module_view
-        gr.update(visible=not on_module),      # team_view
-        render_module(idx if on_module else 0),
-        track(idx),
-        progress_text(idx),
-        gr.update(interactive=idx > 0),
-        gr.update(interactive=idx < TEAM_PAGE, value="Next module" if idx < N - 1 else "Tools by team"),
-        "",                                    # clear quiz result
-        *rail_updates(idx),
-        *quiz_updates(idx),
-    ]
-
-
-FORCE_LIGHT = """
-() => {
-  const strip = () => {
-    document.body.classList.remove('dark');
-    document.documentElement.classList.remove('dark');
-    document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
-  };
-  strip();
-  new MutationObserver(strip).observe(document.body, { attributes: true, attributeFilter: ['class'] });
-}
-"""
-
-THEME = gr.themes.Default(primary_hue="teal", neutral_hue="slate").set(
-    body_background_fill="#F4F7F9",
-    body_background_fill_dark="#F4F7F9",
-    block_background_fill="#FFFFFF",
-    block_background_fill_dark="#FFFFFF",
-    block_label_text_color="#1B2430",
-    block_label_text_color_dark="#1B2430",
-    body_text_color="#1B2430",
-    body_text_color_dark="#1B2430",
-    border_color_primary="#E1E8ED",
-    border_color_primary_dark="#E1E8ED",
-    checkbox_label_background_fill="#FFFFFF",
-    checkbox_label_background_fill_dark="#FFFFFF",
-    checkbox_label_background_fill_selected="#E7F6F4",
-    checkbox_label_background_fill_selected_dark="#E7F6F4",
-    checkbox_label_text_color="#1B2430",
-    checkbox_label_text_color_dark="#1B2430",
-    checkbox_label_text_color_selected="#15516B",
-    checkbox_label_text_color_selected_dark="#15516B",
-    checkbox_background_color="#FFFFFF",
-    checkbox_background_color_dark="#FFFFFF",
-    checkbox_background_color_selected="#13A89E",
-    checkbox_background_color_selected_dark="#13A89E",
-    checkbox_border_color="#61707E",
-    checkbox_border_color_dark="#61707E",
-)
 
 with gr.Blocks(css=CSS, js=FORCE_LIGHT, theme=THEME, title="BOS AI Training") as demo:
     logo_html = f'<img src="{LOGO_SRC}" alt="BOS">' if LOGO_SRC else ""
-    gr.HTML(
-        f"""
-<div class="masthead">
-  <div class="brand">
-    {logo_html}
-    <div class="divider"></div>
-    <div>
-      <h1>AI Training Platform</h1>
-      <p class="tag">Six modules with a knowledge check at the end of each, plus a tools by team reference.</p>
-    </div>
+    with gr.Row(elem_classes=["topbar-row"]):
+        topbar = gr.HTML(f"""
+<div class="topbar">
+  <div class="brand">{logo_html}<div class="divider"></div>
+    <div><h1>AI Training Platform</h1><p class="tag">Six modules with knowledge checks, plus a tools by team reference.</p></div>
   </div>
-  <div class="tool">Company standard: <b>Claude Enterprise</b></div>
-</div>
-"""
-    )
-    bar = gr.HTML(track(0))
-    state = gr.State(0)
+  <div class="right"><div class="tool">Company standard: <b>Claude Enterprise</b></div></div>
+</div>""")
+    bar = gr.HTML(track(HOME, {}))
+    page_state = gr.State(HOME)
+    progress_state = gr.State({})
 
     with gr.Row(equal_height=False):
         with gr.Column(scale=3, min_width=250, elem_classes=["rail"]):
             gr.HTML('<div class="rail-head">Learning path</div>')
-            rail_btns = [
-                gr.Button(f"{i + 1}.  {m['title']}", variant="primary" if i == 0 else "secondary")
-                for i, m in enumerate(MODULES)
-            ]
+            rail_btns = [gr.Button("Overview", variant="primary", elem_id="rail-0")]
+            for i, m in enumerate(MODULES):
+                rail_btns.append(gr.Button(f"{i + 1}.  {m['title']}", variant="secondary", elem_id=f"rail-{i + 1}"))
             gr.HTML('<div class="rail-sub">Reference</div>')
-            rail_btns.append(gr.Button("Tools by team", variant="secondary"))
+            rail_btns.append(gr.Button("Tools by team", variant="secondary", elem_id="rail-team"))
+            pct_html = gr.HTML(pct_badge({}))
 
         with gr.Column(scale=8):
-            with gr.Column(visible=True) as module_view:
-                content = gr.HTML(render_module(0))
+            with gr.Column(visible=True) as home_view:
+                home = gr.HTML(render_home({}))
+
+            with gr.Column(visible=False) as module_view:
+                content = gr.HTML("")
                 with gr.Column(elem_classes=["quiz"]):
-                    gr.HTML('<div class="qhead"><h3>Knowledge check</h3>'
-                            "<p>Pick one answer per question, then check. Anything you miss shows the correct answer and why.</p></div>")
+                    qhead = gr.HTML(quiz_head(1))
                     radios = [gr.Radio(choices=[], label="", visible=False) for _ in range(MAXQ)]
                     check_btn = gr.Button("Check answers", elem_classes=["check"])
                     result = gr.HTML("")
@@ -375,16 +534,18 @@ with gr.Blocks(css=CSS, js=FORCE_LIGHT, theme=THEME, title="BOS AI Training") as
 
             with gr.Row(elem_classes=["navrow"]):
                 prev_btn = gr.Button("Previous module", variant="secondary", interactive=False)
-                progress = gr.HTML(progress_text(0))
-                next_btn = gr.Button("Next module", variant="primary")
+                progress_lbl = gr.HTML(progress_text(HOME))
+                next_btn = gr.Button("Start module 1", variant="primary")
 
-    outputs = [state, module_view, team_view, content, bar, progress, prev_btn, next_btn, result, *rail_btns, *radios]
+    outputs = [page_state, home_view, module_view, team_view, home, content, bar, pct_html, progress_lbl,
+               prev_btn, next_btn, qhead, result, *rail_btns, *radios]
     for i, b in enumerate(rail_btns):
-        b.click(lambda i=i: show(i), outputs=outputs)
-    prev_btn.click(lambda s: show(s - 1), inputs=state, outputs=outputs)
-    next_btn.click(lambda s: show(s + 1), inputs=state, outputs=outputs)
-    check_btn.click(grade, inputs=[state, *radios], outputs=result)
-    demo.load(lambda: show(0), outputs=outputs)
+        b.click(lambda prog, i=i: show(i, prog), inputs=progress_state, outputs=outputs)
+    prev_btn.click(lambda p, prog: show(p - 1, prog), inputs=[page_state, progress_state], outputs=outputs)
+    next_btn.click(lambda p, prog: show(p + 1, prog), inputs=[page_state, progress_state], outputs=outputs)
+    check_btn.click(grade, inputs=[page_state, progress_state, *radios],
+                    outputs=[progress_state, result, bar, pct_html, content, *rail_btns])
+    demo.load(lambda: show(HOME, {}), outputs=outputs)
 
 if __name__ == "__main__":
     demo.launch()

modules.py

@@ -18,6 +18,11 @@ IT_HELP = (
 MODULES = [
     {
         "title": "AI at BOS: Start Here",
+        "takeaways": [
+            "Claude Enterprise is the one approved AI tool for BOS and client information.",
+            "A language model drafts, rewrites, summarizes, and reasons in plain language. It does not know BOS unless you tell it.",
+            "You carry the responsibility for anything the tool helps you produce.",
+        ],
         "summary": "What AI is, what it is not, and why BOS standardized on one tool.",
         "depth": "Foundation",
         "sections": [
@@ -86,6 +91,11 @@ account, or AI features baked into browser extensions and phone apps.</p>
     },
     {
         "title": "How AI Actually Works",
+        "takeaways": [
+            "The model predicts plausible text. It does not look facts up unless given a tool to do so.",
+            "Its working knowledge is the context: your messages, its replies, and attached files.",
+            "Every number, date, name, and compatibility claim gets verified against the real source.",
+        ],
         "summary": "Prediction, training data, context, and why the tool sometimes makes things up.",
         "depth": "Foundation",
         "sections": [
@@ -152,6 +162,11 @@ not the AI's opinion.</p>
     },
     {
         "title": "Your First Conversations",
+        "takeaways": [
+            "Confirm you are in the BOS organization workspace before any work use.",
+            "Good requests carry context, specifics, material, and a next step.",
+            "The first answer is a draft. Iterate two or three times and keep your own voice.",
+        ],
         "summary": "Getting started in Claude Enterprise and the basics of asking well.",
         "depth": "Practice",
         "sections": [
@@ -210,6 +225,11 @@ conversation degrades results and makes it harder to find things later.</p>
     },
     {
         "title": "Getting Better Results",
+        "takeaways": [
+            "Give the model a role and a quality bar, and paste an example of work you were happy with.",
+            "Break big deliverables into an outline and sections. Ask it to answer only from attached documents.",
+            "Check with BOS IT before creating a shared project; one may already exist.",
+        ],
         "summary": "Techniques that separate a casual user from someone who saves hours a week.",
         "depth": "Practice",
         "sections": [
@@ -295,6 +315,11 @@ items. Cut them.</p>
     },
     {
         "title": "Security and Data",
+        "takeaways": [
+            "CUI, FCI, export controlled material, credentials, personnel data, and raw incident material never go into any AI tool.",
+            "External material refers to clients generically unless attribution is approved in writing.",
+            "Legal notices, subpoenas, claims, regulatory inquiries, and incident disputes go to leadership, not to a draft.",
+        ],
         "summary": "The hard lines. Required reading for every BOS employee.",
         "depth": "Required",
         "sections": [
@@ -393,6 +418,11 @@ to BOS IT.</p>
     },
     {
         "title": "Everyday Workflows and Getting Help",
+        "takeaways": [
+            "Each role has good uses and hard lines. Know yours.",
+            "Finished work reads like a person at BOS wrote it: prose, bold inline labels, no em dashes, no emojis.",
+            "Ask BOS IT before you paste, not after.",
+        ],
         "summary": "What good use looks like in your role, and where to turn when you need help.",
         "depth": "Applied",
         "sections": [