Turn the curriculum steps into a roadmap with quests to clear

The five levels sit on one road as stages, each with a progress ring, and
a pin marks the first stage not yet cleared. Materials are numbered
quests with a clear button on the card; clearing every quest in a stage
shows the finish card. A small tracker beside the tab note counts quests
and stage badges, kept in this browser only.

Author: jsshin2022

assets/css/hub.css

@@ -1491,8 +1491,6 @@ button.btn.sm { font-size: 14px; }
 .ev-num { white-space: nowrap; }
 
 /* ---------- curriculum as courses: tier names, who it is for, the Builders, a first look, the textbook ---------- */
-.st-en { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
-.step button[aria-pressed="true"] .st-en { color: rgba(255, 255, 255, .7); }
 .lv-for { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14.5px; color: var(--ink); margin-top: 6px; }
 .lv-for b { font-size: 12px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); padding: 2px 9px; border-radius: 999px; }
 .lv-crew { grid-column: 1 / -1; margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
@@ -1511,9 +1509,7 @@ button.btn.sm { font-size: 14px; }
 .ep-tags { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 72%, var(--ink)); }
 .ep-spec { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--ink); }
 .ep-spec b { display: inline-block; min-width: 2.6em; margin-right: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
-#shelf .ep.has-try { position: relative; }
-#shelf .ep.has-try > button { padding-bottom: 58px; }
-.ep-try { position: absolute; left: 18px; bottom: 14px; display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); color: var(--accent); font-size: 13.5px; font-weight: 700; text-decoration: none; }
+.ep-try { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); color: var(--accent); font-size: 13.5px; font-weight: 700; text-decoration: none; }
 .ep-try:hover { border-color: var(--accent); }
 .ep-try:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
 .lv-text { margin-top: 18px; padding: 16px 18px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--l-main) 45%, var(--rule)); }
@@ -1529,3 +1525,77 @@ button.btn.sm { font-size: 14px; }
 .tb-c { font-size: 13px; color: var(--muted); }
 .tb-go { display: flex; flex-wrap: wrap; gap: 6px; }
 #shelf .tb.picked { box-shadow: 0 0 0 3px var(--l-main); }
+
+/* ---------- roadmap: five stages on one road, quests that can be cleared ---------- */
+.note-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
+.note-row .tab-note { flex: 1 1 360px; }
+.quest-hud { display: flex; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--muted); }
+.qh-k { font-weight: 800; color: var(--ink); }
+.qh-bar { width: 120px; height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
+.qh-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #FFC93C); transition: width .4s ease; }
+.qh-n b { color: var(--ink); font-size: 15px; }
+.path-k span { letter-spacing: .05em; }
+.path { position: relative; gap: 0; padding: 4px 6px; border-radius: 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, var(--surface)) 0 60%, color-mix(in srgb, var(--l-ai) 9%, var(--surface)) 60% 100%); }
+.step:not(:last-child)::after { top: 55px; left: calc(50% + 34px); right: calc(-50% + 34px); width: auto; height: 6px; border: 0; border-radius: 3px; transform: none; opacity: 1; z-index: 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--muted) 45%, transparent) 0 10px, transparent 10px 18px); }
+.step.cleared:not(:last-child)::after { background: #FFC93C; }
+.step button { position: relative; align-items: center; text-align: center; gap: 2px; padding: 30px 8px 12px; background: transparent; }
+.step button:hover { background: color-mix(in srgb, var(--surface) 75%, transparent); box-shadow: none; }
+.step button[aria-pressed="true"], .step button[aria-pressed="true"]:hover { background: var(--surface); color: var(--ink); box-shadow: 0 6px 20px rgba(20, 22, 43, .1); }
+.step button[aria-pressed="true"] .st-q, .step button[aria-pressed="true"] .st-meta { color: var(--muted); }
+.step button[aria-pressed="true"] .st-makers .avatar.sm { box-shadow: 0 0 0 2px var(--surface); }
+.st-node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--muted) 28%, var(--surface)) 0); }
+.step.build .st-node { background: conic-gradient(var(--l-ai) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--muted) 28%, var(--surface)) 0); }
+.st-node::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
+.st-node .st-id { position: relative; font-size: 20px; }
+.step button[aria-pressed="true"] .st-node::before { background: #23276A; }
+.step button[aria-pressed="true"] .st-id { color: #FFD54A; }
+.step.cleared .st-node { background: #FFC93C; }
+.step.cleared .st-node::before { background: #FFF3C4; }
+.step.cleared .st-id, .step.cleared button[aria-pressed="true"] .st-id { color: #8A5A00; font-size: 24px; }
+.step.cleared button[aria-pressed="true"] .st-node::before { background: #FFE38A; }
+.st-pin { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
+.st-pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px; z-index: -1; }
+@media (prefers-reduced-motion: no-preference) {
+  .st-pin { animation: st-bob 2.4s ease-in-out infinite; }
+  @keyframes st-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }
+}
+.st-name { margin-top: 8px; font-size: 15.5px; }
+.st-q { font-size: 13px; }
+.st-meta { margin-top: 2px; padding-top: 0; }
+.st-clear { color: #8A5A00; font-weight: 800; letter-spacing: .06em; }
+.st-makers { justify-content: center; }
+@media (max-width: 860px) {
+  .path { grid-auto-columns: 136px; gap: 0; background: var(--surface); }
+  .step::after { display: block; }
+  .step .st-q { -webkit-line-clamp: 1; }
+  .step .st-makers { display: none; }
+  .lv-kick { display: none; }
+  .stage-goal { flex-basis: 100%; }
+}
+.lv-kick { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
+.lv-t .lv-kick { margin-top: 0; font-size: 12px; }
+#shelf .ep:not(.tb) { display: flex; flex-direction: column; border-radius: 16px; background: var(--surface-2); }
+#shelf .ep:not(.tb) > button, #shelf .ep:not(.tb) > button:hover { background: transparent; flex: 1; }
+#shelf .ep:not(.tb):hover { background: color-mix(in srgb, var(--c) 8%, var(--surface-2)); }
+#shelf .ep.picked, #shelf .ep.picked > button { box-shadow: none; }
+#shelf .ep.picked { box-shadow: 0 0 0 3px var(--c); }
+#shelf .ep.cleared { box-shadow: inset 0 0 0 2px #FFC93C; }
+.ep-q { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--muted); flex-shrink: 0; }
+#shelf .ep-done { background: #FFC93C; color: #14162B; letter-spacing: .06em; }
+.ep-acts { display: flex; align-items: center; gap: 8px; padding: 0 18px 16px; }
+.ep-clear { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; padding: 5px 13px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); color: var(--muted); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
+.ep-clear:hover { color: var(--ink); border-color: var(--ink); }
+.ep-clear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
+.ep-clear[aria-pressed="true"] { border: 1.5px solid #FFC93C; background: #FFE9A8; color: #6B4500; }
+.lv-foot { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
+.lv-foot .lv-next { margin-top: 0; flex: 0 0 auto; display: flex; align-items: center; }
+.stage-goal { flex: 1 1 320px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
+.sg-badge { padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
+.sg-n { margin-left: auto; font-weight: 800; }
+.stage-goal.clear { background: #FFF3C4; color: #3A2A00; }
+.stage-goal.clear .sg-badge { background: #FFC93C; color: #14162B; }
+.stage-goal .btn.sm { margin-left: auto; }
+@media (prefers-reduced-motion: no-preference) {
+  .stage-goal.pop { animation: sg-pop .7s ease; }
+  @keyframes sg-pop { 0% { transform: scale(.96); } 55% { transform: scale(1.02); } 100% { transform: scale(1); } }
+}