.st-under { margin-top: 0.9em; }
.st-stats .k-stat > b { font-size: 1.7em; }
@media (max-width: 39.99em) { .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-hero-grid { display: grid; gap: 0.9em; margin-top: 0.9em; }
@media (min-width: 64em) { .st-hero-grid { grid-template-columns: 1fr 1.05fr; align-items: stretch; } }
.page-skills-training .st-dist .k-hbars { gap: 0.6em; }
.page-skills-training .st-dist .k-hbars li { grid-template-columns: minmax(8.4em, 40%) 1fr 2.2em; }
.page-skills-training .st-dist .k-hbars li > b { font-variant-numeric: tabular-nums; color: var(--app-text); }
.page-skills-training .st-dist .st-short > span:first-child { font-weight: 600; color: var(--app-text); }
.st-cat { box-shadow: inset 4px 0 0 var(--green); display: grid; gap: 0.7em; align-content: start; }
.page-skills-training .st-cat h4 { margin-bottom: 0; }
.st-cat h4 small { margin-left: 0.5em; font-size: 0.84em; font-weight: 500; color: var(--app-text-3); }
.st-cat-skill { padding: 0.7em 0.8em; border-radius: 0.6em; background: var(--app-bg); border: 1px solid var(--app-border); }
.st-cat-skill p { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 0.45em; }
.st-cat-skill p b { font-weight: 600; color: var(--app-text); }
.st-cat-skill p em { font-style: normal; font-weight: 700; color: var(--app-text); font-variant-numeric: tabular-nums; }
.st-cat-skill > div { display: flex; flex-wrap: wrap; gap: 0.35em; }
.st-cat-skill.st-low { border-color: var(--orange-line); }
.st-cat-skill.st-low p em { color: var(--amber-text); }
.page-skills-training .k-chip.st-prim { font-weight: 600; color: var(--orange-text); background: var(--orange-tint); border-color: var(--orange-line); }
.page-skills-training .k-chip.st-prim::before { content: "★"; font-size: 0.8em; }
.page-skills-training .k-chip.st-more { color: var(--app-text-3); border-style: dashed; }
.st-skills { display: grid; gap: 0.6em; }
.st-skills li { padding: 0.8em 0.9em; border-radius: 0.7em; background: var(--card); border: 1px solid var(--app-border); }
.st-skills p { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 0.5em; }
.st-skills b { font-weight: 600; color: var(--app-text); }
.st-skills em { font-style: normal; font-weight: 700; font-size: 1.2em; color: var(--app-text); font-variant-numeric: tabular-nums; }
.st-skills div { display: flex; flex-wrap: wrap; gap: 0.35em; }
.st-skills .st-low { border-color: var(--orange-line); box-shadow: inset 3px 0 0 var(--orange); }
.st-skills .st-low em { color: var(--amber-text); }
.page-skills-training .st-byworker td { white-space: normal; }
.page-skills-training .st-byworker .badge { margin-block: 0.1em; }
.st-lesson { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1em; align-items: start; }
.st-video { position: relative; aspect-ratio: 16 / 10; border-radius: 0.6em; background: var(--ink); overflow: hidden; }
.st-video span { position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: var(--orange); }
.st-video span::after { content: ""; position: absolute; left: 1.05em; top: 0.8em; border-left: 0.8em solid var(--on-orange); border-block: 0.5em solid transparent; }
.st-video i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--orange); transform-origin: 0 50%; transform: scaleX(1); }
.js [data-step="1"] .st-video i { animation: growXs 1.9s linear both; }
.st-lessons { display: grid; gap: 0.35em; counter-reset: st; }
.st-lessons li { position: relative; padding: 0.45em 0.6em 0.45em 2.2em; border-radius: 0.6em; color: var(--app-text-2); counter-increment: st; }
.st-lessons li::before { content: counter(st); position: absolute; left: 0.5em; top: 0.45em; width: 1.35em; height: 1.35em; border-radius: 50%; display: grid; place-content: center; font-size: 0.78em; font-weight: 700; color: var(--app-text-3); background: var(--app-bg-alt); }
.st-lessons .is-done::before { content: "✓"; color: var(--card); background: var(--green-text); }
.st-lessons .is-now { font-weight: 600; color: var(--app-text); background: var(--orange-tint); }
.st-lessons .is-now::before { color: var(--on-orange); background: var(--orange); }
.js [data-step="2"] .st-quiz-step { font-weight: 600; color: var(--app-text); background: var(--orange-tint); }
.js [data-step="2"] .st-quiz-step::before { color: var(--on-orange); background: var(--orange); }
[data-steps]:not([data-step]) .st-quiz-step::before, .js [data-step="3"] .st-quiz-step::before, .js [data-step="4"] .st-quiz-step::before { content: "✓"; color: var(--card); background: var(--green-text); }
.st-quiz { padding: 0.9em 1em; border-radius: 0.7em; background: var(--card); border: 1px solid var(--app-border); }
.st-quiz p { color: var(--app-text-2); }
.st-quiz p b { color: var(--app-text); }
.st-quiz ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-top: 0.7em; }
.st-quiz li { padding: 0.5em 0.6em; border-radius: 0.7em; text-align: center; font-weight: 600; color: var(--app-text-2); border: 1px solid var(--app-border); }
.st-quiz .is-picked { color: var(--orange-text); background: var(--orange-wash); border-color: var(--orange-line); }
.st-result { display: flex; align-items: center; gap: 1em; }
.st-result p { color: var(--app-text-2); line-height: 1.5; }
.st-result p b { color: var(--green-text); }
.st-path { position: relative; display: grid; gap: 0.5em; }
.st-path li { position: relative; display: grid; padding: 0.6em 0.8em 0.6em 2.6em; border-radius: 0.8em; background: var(--card); border: 1px solid var(--app-border); }
.st-path li::before { content: ""; position: absolute; left: 0.8em; top: 0.85em; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--app-bg-alt); box-shadow: inset 0 0 0 1.5px var(--app-border); }
.st-path b { font-weight: 600; color: var(--app-text); }
.st-path span { font-size: 0.84em; color: var(--app-text-3); }
.st-path .is-done::before { content: "✓"; display: grid; place-content: center; font-size: 0.7em; font-weight: 700; color: var(--card); background: var(--green-text); box-shadow: none; }
.st-path .is-now { border-color: var(--orange-line); box-shadow: inset 3px 0 0 var(--orange); }
.st-path .is-now::before { background: var(--orange); box-shadow: none; }
.st-path .is-locked { opacity: 0.6; }
.st-board th small { display: block; font-weight: 500; font-size: 0.84em; color: var(--app-text-3); }
.st-board td:first-child { width: 2.5em; font-weight: 700; color: var(--app-text-3); }
.st-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1.4em; margin: 0.9em 0 0.4em; color: var(--app-text-2); font-weight: 500; }
.st-switches > span { display: inline-flex; align-items: center; gap: 0.5em; }
.st-switches .a-swap > i { display: block; }
.st-build { margin-bottom: 0.4em; }
.page-skills-training .st-build li > em { width: 1.4em; text-align: center; }
@media (max-width: 39.99em) {
  .page-skills-training .screen .k-table th, .page-skills-training .screen .k-table td { padding-inline: 0.55em; }
}
@media (max-width: 39.99em) { .page-skills-training .screen .k-table .badge { padding-inline: 0.5em; font-size: 0.72em; } }
.page-skills-training .st-stats .k-stat { align-content: space-between; }
.page-skills-training .st-stats .k-stat > span { white-space: normal; line-height: 1.25; }
.st-prob { margin-bottom: var(--space-5); font-weight: 500; }
.st-cols { display: grid; gap: 0.9em 1.3em; align-items: start; }
.st-cols > * { min-width: 0; }
.st-pair { display: grid; gap: var(--space-4); align-items: stretch; }
.st-pair > * { min-width: 0; }
@media (min-width: 40em) {
  .st-cols, .st-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-cols > div > .k-pick-rule:first-child { margin-top: 0; }
  .st-learn .st-lesson { grid-template-columns: minmax(0, 1fr); gap: 0.7em; }
  .st-learn .st-video { aspect-ratio: 16 / 6.8; }
  .st-learn .st-lessons { grid-template-columns: 1fr 1fr; gap: 0.2em 0.6em; }
}
.st-learn { margin-top: 0.3em; }
.st-learn-side { display: grid; gap: 0.8em; align-content: start; }
.st-reading .k-lines { margin-top: 0.9em; }
.st-quizform { margin-top: 0.5em; }
@media (min-width: 60em) {
  .page-skills-training #how .jx--side { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--space-6); }
  .page-skills-training #how .jx-stage { align-self: stretch; }
  .js .page-skills-training #how .jp--row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .js .page-skills-training #how .jp--row > .jp-copy { padding: 1.6rem 1.75rem; gap: 0.85rem; }
  .js .page-skills-training #how .jp-screen { padding: 0.9rem; }
  .page-skills-training #how-tracker .k-table th, .page-skills-training #how-tracker .k-table td { padding-inline: 0.42em; }
  .page-skills-training #how-tracker .k-table tr > :first-child { padding-left: 0.7em; }
  .page-skills-training .jx--steps .jp--row { --jp-h: 22rem; }
}
.st-pair .st-path { gap: 0.6em; }
.st-pair .st-path li { padding-block: 0.8em; }
.st-pair .st-path li::before { top: 1.05em; }
.page-skills-training .jp-screen .k-table th, .page-skills-training .jp-screen .k-table td { padding-inline: 0.6em; }
.st-cols .st-switches { margin-bottom: 0.9em; }
@media (max-width: 35.99em) { .js .page-skills-training #how .jx-tabs > li:last-child { grid-column: 1 / -1; } }
@media (max-width: 39.99em) { .page-skills-training #hub-learn .k-pagehead h3 small { display: block; margin: 0.2em 0 0; } }
@media (max-width: 39.99em) { .page-skills-training .fhero-facts li:nth-child(3) { flex-basis: 100%; max-width: none; } }
@media (max-width: 29.99em) { .page-skills-training .st-quizform { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56em) {
  .page-skills-training .jd-body .why-card { grid-template-rows: auto auto 1fr auto; padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
  .page-skills-training .jd-body .why-card h3 { min-height: 2.2em; align-content: end; }
  .page-skills-training .jd-body .why-card li { text-wrap: pretty; }
}
@media (min-width: 60em) {
  html:not(.js) .page-skills-training #how .jx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
}