#clpath{font:16px system-ui;color:#183c2c;background:#f3f6ef;padding:22px;border-radius:18px;color-scheme:light}#clpath *{box-sizing:border-box}#clpath [hidden]{display:none!important}#clpath p,#clpath small,#clpath span,#clpath label,#clpath h2,#clpath h3{color:#183c2c;opacity:1}#clpath h2{font-size:23px}#clpath h3{font-size:18px}#clpath small{display:block;margin:9px 0}#clpath button,#clpath input{font:inherit;min-height:44px;padding:10px 13px;border:1px solid #8ca693;border-radius:8px;background:#fff;color:#183c2c}#clpath button{cursor:pointer}#clpath button:disabled{opacity:1;color:#385943;background:#e4ebe2;cursor:default}#clpath .primary{background:#296c51;color:#fff}#clpath .row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:14px 0}#clpath .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}#clpath article{background:#fff;border:2px solid transparent;border-radius:13px;padding:18px;margin:12px 0}#clpath article.valid{border-color:#296c51}#clpath .steps{display:flex;gap:7px;flex-wrap:wrap}#clpath .badge{padding:8px;background:#edf0e9;border-radius:7px}#clpath .current{background:#ffe4a5}#clpath .done{background:#d2eadb}#clpath .boxes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}#clpath .box{padding:12px;border:1px solid #93ab9a;border-radius:7px}#clpath .math{font-size:23px;margin:20px 0;line-height:1.7;overflow-wrap:anywhere}#clpath input{max-width:100%;width:240px}#clpath input::placeholder{color:#42604d;opacity:1}#clpath .programme{border:2px solid #577b64;padding:15px;max-width:420px;border-radius:4px}#clpath .layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}#clpath table{border-collapse:collapse;max-width:100%;margin:12px 0}#clpath td,#clpath th{padding:8px;border:1px solid #9ab09f;text-align:center;color:#183c2c}#clpath td input{width:100px;max-width:100%}#clpath .terms button{margin:4px}#clpath .terms button.selected{border:3px solid #a26300;background:#ffe4a5}#clpath .terms button.groupx{border:3px solid #166b93;background:#d6ecf6}#clpath .terms button.groupone{border:3px solid #a26300;background:#ffebc3}#clpath #clfeedback{font-weight:600;min-height:26px}#clpath .error{color:#913821}@media(max-width:650px){#clpath .layout{grid-template-columns:1fr}#clpath{padding:15px}#clpath td,#clpath th{padding:5px}#clpath td input{width:75px}}

#clpath,#clpath article,#clpath div,#clpath p,#clpath small,#clpath span,#clpath label,#clpath h2,#clpath h3,#clpath strong,#clpath summary,#clpath details,#clpath th,#clpath td{color:#103923!important;opacity:1!important}
#clpath input,#clpath select,#clpath button{color:#103923!important;-webkit-text-fill-color:#103923!important;opacity:1!important}
#clpath input::placeholder{color:#284f36!important;-webkit-text-fill-color:#284f36!important;opacity:1!important}
#clpath input:disabled,#clpath button:disabled{color:#284f36!important;-webkit-text-fill-color:#284f36!important;background:#e4ebe2!important;opacity:1!important}
#clpath button.primary{color:#fff!important;-webkit-text-fill-color:#fff!important;background:#205d40!important}
#clpath button.primary:disabled{color:#284f36!important;-webkit-text-fill-color:#284f36!important;background:#e4ebe2!important}

body{margin:0;background:#f3f6ef;font-family:system-ui}main{max-width:1120px;margin:auto;padding:16px}.cl-top{padding:16px}.cl-top a{color:#183c2c}
#clpath button,#clpath button:disabled{background:#235e40!important;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}#clpath button:disabled{border:2px dashed #d8e8d9!important}#clpath .cl-tool-expression{font-size:27px;min-height:150px;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}#clpath .replacement,#clpath .replacement span{color:#174ca0!important;background:#eaf1ff;border-radius:8px}#clpath .cl-tool-expression .katex{white-space:normal;font-size:1em}#clpath .cl-tool-expression .katex .base{margin:5px 0}

#clpath [data-production="true"] .layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
#clpath .cl-program-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
}
#clpath .cl-program-box {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  max-width: 200px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid #8ca693;
  border-radius: 12px;
  background: #f1f8f3;
  text-align: center;
}
#clpath .cl-program-box strong { font-size: 1.5rem; }
#clpath .cl-program-box input { width: 100%; text-align: center; padding-inline: 6px; }
#clpath .cl-program-box .cl-program-accepted { border: 2px solid #2b7853; }
#clpath .cl-program-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
#clpath .cl-program-arrow span {
  background: #ffedd5;
  border-radius: 8px;
  padding: 4px 7px;
  font-weight: 750;
  white-space: nowrap;
}
#clpath .cl-program-arrow b { color: #984a13; font-size: 2rem; line-height: 1; }
#clpath .cl-patterns, #clpath .cl-pattern-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 760px;
  margin: 12px auto;
}
#clpath .cl-patterns figure {
  margin: 0;
  padding: 6px;
  border: 1px solid #a8bcac;
  border-radius: 10px;
  background: #f7faf7;
  text-align: center;
}
#clpath .cl-patterns svg { display: block; width: 100%; }
#clpath .cl-patterns figcaption { padding: 5px 0; font-weight: 700; }
#clpath .cl-pattern-counts label { display: grid; gap: 5px; justify-items: center; }
#clpath .cl-pattern-counts input { width: 100%; max-width: 105px; text-align: center; }
@media(max-width: 720px) {
  #clpath .cl-program-flow { flex-direction: column; align-items: center; }
  #clpath .cl-program-box { width: min(100%, 250px); max-width: none; }
  #clpath .cl-program-arrow b { transform: rotate(90deg); }
}