/* the prompt course: the track under a lesson's title, the syllabus beside it, the exercise, and the course home */
.cx-track{list-style:none; display:flex; gap:4px; margin:1.1rem 0 0; padding:0; max-width:34rem}
.cx-track li{flex:1; height:5px; border-radius:3px; background:var(--line)}
.cx-track li.done{background:var(--hi-strong)}
.cx-track li.here{box-shadow:0 0 0 1.5px var(--ink); background:var(--ink)}
.cx-track li.here.done{background:var(--hi-strong)}

.gd .doc-toc.cx-toc a{display:flex; align-items:baseline; gap:.55rem}
.cx-tn{flex:none; width:1.4rem; font:500 .78rem/1 var(--f-mono); color:var(--ink-3); font-variant-numeric:tabular-nums}
.cx-toc a.done .cx-tn{color:var(--hi-ink)}
.cx-toc a.done::after{content:""; flex:none; margin-left:auto; margin-right:.35rem; width:.38rem; height:.7rem; border-right:1.6px solid var(--hi-strong); border-bottom:1.6px solid var(--hi-strong); transform:rotate(45deg) translate(-2px,-2px)}
.cx-toc a[aria-current="page"]{color:var(--ink); font-weight:600}

.cx-tip{padding:.85rem 1.05rem; border-left:3px solid var(--hi-strong); border-radius:0 10px 10px 0; background:var(--hi-wash); color:var(--ink-2)}
.cx-note{font:italic 400 1rem/1.55 var(--f-serif); color:var(--ink-3)}

/* the exercise */
.cx{margin:2.6rem 0 0; padding:clamp(1.1rem,3vw,1.6rem); background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--hi-strong); border-radius:var(--r-lg); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.85rem}
.prose .cx h2{margin:0}
.cx-brief{margin:0; color:var(--ink)}
.cx-goal{margin:0; font:400 .96rem/1.55 var(--f-ui); color:var(--ink-2)}
.cx-lab{font:600 .9rem/1.3 var(--f-ui); color:var(--ink)}
.cx-in{font:400 .9rem/1.55 var(--f-mono); min-height:9rem; resize:vertical}
.cx-live{display:flex; flex-direction:column; gap:.6rem}
.cx-score{display:flex; align-items:baseline; gap:.45rem; margin:0}
.cx-score b{font:300 2.8rem/.9 var(--f-head); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums}
.cx-score span{font:400 1rem/1 var(--f-ui); color:var(--ink-3)}
.cx-score em{margin-left:.35rem; font:italic 400 1.3rem/1 var(--f-serif); color:var(--ink-2)}
.gd .prose ul.cx-pips > li{margin:0; padding:0}
.gd .prose ul.cx-pips > li::before{content:none; display:none}
.cx-pips{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem 1.2rem}
.cx-pips li{display:flex; align-items:center; gap:.5rem; font:400 .88rem/1.3 var(--f-ui); color:var(--ink-3)}
.cx-pips i{flex:none; width:.8rem; height:.8rem; border-radius:3px; border:1.5px solid var(--line)}
.cx-pips li.need{color:var(--ink); font-weight:600}
.cx-pips li.need i{border-color:var(--hi-strong)}
.cx-pips li.ok{color:var(--ink)}
.cx-pips li.ok i{border-color:var(--good); background:var(--good)}
.cx-status{margin:0; padding:.6rem .85rem; border-radius:8px; background:var(--bg-2); font:500 .95rem/1.45 var(--f-ui); color:var(--ink-2)}
.cx-status.ok{background:var(--good-wash); color:var(--good)}
.cx-status.ok::before{content:""; display:inline-block; width:.4rem; height:.75rem; margin:0 .6rem 0 .15rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.cx-acts{display:flex; flex-wrap:wrap; gap:.5rem}
.cx-more{border-top:1px solid var(--line-2); padding-top:.5rem}
.cx-more summary{cursor:pointer; font:500 .93rem/1.4 var(--f-ui); color:var(--ink-2); min-height:1.8rem}
.cx-more[open] summary{margin-bottom:.4rem}
.cx-more p{margin:.3rem 0 0}
.cx-more .code{white-space:pre-wrap; font-size:.84rem}
.cx-coach{display:flex; flex-direction:column; gap:.5rem; border-top:1px solid var(--line-2); padding-top:.8rem}
.cx-coach-head{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.cx-coach-head .h3{margin:0}
.cx-coach-out{padding:.85rem 1rem; border-radius:10px; background:var(--bg-2); font:400 1rem/1.6 var(--f-serif); color:var(--ink); white-space:pre-wrap}
.cx-coach-out p{margin:0 0 .5rem}
.cx-coach-up{margin:0; font:400 .96rem/1.55 var(--f-ui); color:var(--ink-2)}
.cx .hint{margin:0}
.cx-take{margin-top:2rem; padding-top:1rem; border-top:2px solid var(--ink); color:var(--ink)}
.cx-pn{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.6rem}
.cx-pn a{display:flex; flex-direction:column; gap:.2rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); font:600 .98rem/1.35 var(--f-ui); color:var(--ink); text-decoration:none}
.cx-pn a:hover{border-color:var(--ink-3)}
.cx-pn small{font:500 .8rem/1 var(--f-ui); color:var(--ink-3)}
.cx-next{text-align:right; align-items:flex-end}

/* the course home */
.cx-home{display:flex; flex-direction:column; gap:clamp(1.8rem,4vw,2.8rem)}
.cx-home > *{max-width:62rem}
.cx-start{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem}
.cx-saved{margin:0; font:400 1rem/1.5 var(--f-serif); color:var(--ink-2)}
.cx-meter{flex-basis:100%; height:6px; border-radius:6px; background:var(--line-2); overflow:hidden; max-width:34rem}
.cx-meter i{display:block; height:100%; background:var(--hi-strong); border-radius:6px}
.cx-climb .h2{margin:0 0 .4rem}
.cx-climb-p{margin:0 0 1rem; font:400 1.04rem/1.6 var(--f-serif); color:var(--ink-2); max-width:66ch}
.cx-list{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink)}
.cx-list li{border-bottom:1px solid var(--line-2)}
.cx-list a{display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto 1.4rem; gap:1rem; align-items:center; padding:1rem 0; color:inherit; text-decoration:none}
.cx-list a:hover b{text-decoration:underline; text-underline-offset:.2em}
.cx-ln{font:300 1.9rem/1 var(--f-head); color:var(--ink-3); font-variant-numeric:lining-nums tabular-nums}
.cx-lt{display:flex; flex-direction:column; gap:.2rem; min-width:0}
.cx-lt b{font:600 1.05rem/1.3 var(--f-ui); color:var(--ink)}
.cx-lt span{font:400 .96rem/1.5 var(--f-serif); color:var(--ink-2)}
.cx-lm{display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; text-align:right}
.cx-lm i{font:600 .78rem/1.2 var(--f-ui); font-style:normal; color:var(--ink-2)}
.cx-lm small{font:400 .78rem/1.2 var(--f-ui); color:var(--ink-3)}
.cx-lm small:first-of-type{font:italic 400 .88rem/1.2 var(--f-serif); color:var(--ink-2)}
.cx-done{width:1.3rem; height:1.3rem; border-radius:50%; border:1.5px solid var(--line)}
.cx-list li.done .cx-done{border-color:var(--hi-strong); background:var(--hi-strong); box-shadow:inset 0 0 0 3px var(--panel)}
.cx-list li.done .cx-ln{color:var(--hi-ink)}
.cx-coachnote{padding:1.2rem 1.3rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg)}
.cx-coachnote .h2{margin:0 0 .4rem; font-size:clamp(1.25rem,2.4vw,1.5rem)}
.cx-coachnote p,.cx-also{margin:0; font:400 1.02rem/1.6 var(--f-serif); color:var(--ink-2); max-width:66ch}

@media (max-width:40rem){
  .cx-pips{grid-template-columns:minmax(0,1fr)}
  .cx-list a{grid-template-columns:2rem minmax(0,1fr) 1.2rem}
  .cx-lm{display:none}
  .cx-pn{grid-template-columns:minmax(0,1fr)}
  .cx-next{text-align:left; align-items:flex-start}
}

/* where you are, and the way straight to the exercise */
.cx-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.2rem; margin:1.2rem 0 0; max-width:44rem}
.cx-where{display:flex; flex-direction:column; gap:.15rem; margin:0}
.cx-where b{font:600 .95rem/1.3 var(--f-ui); color:var(--ink)}
.cx-where span{font:400 .95rem/1.4 var(--f-serif); color:var(--ink-2)}
.cx-head .cx-track{margin-top:.9rem; max-width:44rem}
/* on a phone the lessons fold into one line, so the lesson itself comes first */
.cx-all{display:none}
.cx-all summary{cursor:pointer; min-height:2.4rem; display:flex; align-items:center; font:500 .92rem/1.3 var(--f-ui); color:var(--ink-2)}
.cx-all nav{display:flex; flex-direction:column; border-top:1px solid var(--line-2); margin-top:.3rem}
.cx-all nav a{display:flex; align-items:baseline; gap:.55rem; padding:.55rem 0; border-bottom:1px solid var(--line-2); font:500 .95rem/1.35 var(--f-ui); color:var(--ink-2); text-decoration:none}
.cx-all nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.cx-all nav a.done .cx-tn{color:var(--hi-ink)}
@media (max-width:62rem){
  .cx-all{display:block; margin-top:.8rem}
  .doc > .cx-toc{display:none}
}
/* done: say so, and offer the next lesson right there */
.cx-status{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem}
.cx-status.ok::before{display:none}
.cx-status .cx-go{flex:none}

/* more practice, under the lesson's own exercise */
.cx-practice{margin-top:2.6rem}
.cx-practice > p{margin:.3rem 0 0}
.cx-practice .cx{margin-top:1.4rem; border-top-width:1px}
.prose .cx h3{margin:0; font:400 1.35rem/1.25 var(--f-head)}
.cx.done{border-top-color:var(--good)}
.cx.done > h2::after,.cx.done > h3::after{content:"Done"; display:inline-flex; align-items:center; margin-left:.7rem; padding:.2rem .55rem; border-radius:999px; background:var(--good-wash); font:600 .72rem/1 var(--f-ui); color:var(--good); vertical-align:.3em}
.cx-why{margin:0; padding:.7rem .9rem; border-radius:8px; background:var(--good-wash); font:400 1rem/1.55 var(--f-serif); color:var(--ink-2)}
.cx-why b{color:var(--good)}

/* the quick check */
.cx-quiz{margin-top:2.6rem; padding:clamp(1.1rem,3vw,1.6rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
.prose .cx-quiz h2{margin:0}
.cx-quiz-p{margin:.35rem 0 0; color:var(--ink-3)}
.gd .prose ol.cx-qs{list-style:none; margin:1rem 0 0; padding:0; counter-reset:q; display:flex; flex-direction:column; gap:1.2rem}
.gd .prose ol.cx-qs > li{margin:0; padding:0; counter-increment:q}
.gd .prose ol.cx-qs > li::before{content:none; display:none}
.cx-q-q{margin:0 0 .5rem; color:var(--ink); font-weight:500}
.cx-q-q::before{content:counter(q) ". "; font:600 .95rem/1 var(--f-ui); color:var(--ink-3)}
.cx-opts{display:flex; flex-direction:column; gap:.4rem}
.cx-opt{display:block; width:100%; text-align:left; padding:.65rem .85rem; min-height:2.6rem; border:1px solid var(--line); border-radius:10px; background:var(--field); font:400 .95rem/1.45 var(--f-ui); color:var(--ink); cursor:pointer}
.cx-opt:hover{border-color:var(--ink-3)}
.cx-opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.answered .cx-opt{cursor:default}
.answered .cx-opt:not(.correct):not(.picked){opacity:.55}
.cx-opt.correct{border-color:var(--good); background:var(--good-wash)}
.cx-opt.picked:not(.correct){border-color:var(--bad); background:color-mix(in srgb, var(--bad) 9%, var(--panel))}
.cx-q-why{margin:.55rem 0 0; font:400 .98rem/1.55 var(--f-serif); color:var(--ink-2)}
.right .cx-q-why b{color:var(--good)}
.wrong .cx-q-why b{color:var(--bad)}
.cx-q-score{margin:1rem 0 0; font:600 .95rem/1.4 var(--f-ui); color:var(--ink)}
.cx-q-score:empty{display:none}

/* the practice library */
.px-index{list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.6rem; max-width:52rem}
.px-index li{border-bottom:1px solid var(--line-2)}
.px-index a{display:flex; align-items:baseline; gap:.55rem; padding:.45rem 0; font:500 .92rem/1.35 var(--f-ui); color:var(--ink-2); text-decoration:none}
.px-index a:hover{color:var(--ink)}
.px-index li.done a{color:var(--ink)}
.px-index li.done .cx-tn{color:var(--good)}
.px-index li.done a::after{content:""; flex:none; margin-left:auto; width:.38rem; height:.7rem; border-right:1.6px solid var(--good); border-bottom:1.6px solid var(--good); transform:rotate(45deg) translate(-2px,-2px)}
.px-topics .cx-lm i{font:500 .82rem/1.2 var(--f-ui); color:var(--ink-3)}
@media (max-width:40rem){ .px-index{grid-template-columns:minmax(0,1fr)} }