*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --head:system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'SFMono-Regular','Consolas','Liberation Mono',monospace;
  --text:#1a1a18;--muted:#6b6b67;--hint:#9e9e9a;
  --bg:#ffffff;--bg2:#f5f4ef;--border:#e8e7e0;--border2:#d4d3cc;
  --r:12px;--rm:8px;
  --purple:#534AB7;--purple-l:#EEEDFE;--purple-d:#26215C;
  --teal:#1D9E75;--teal-l:#E1F5EE;--teal-d:#085041;
  --amber:#BA7517;--amber-l:#FAEEDA;--amber-d:#633806;
  --red:#E24B4A;--red-l:#FCEBEB;--red-d:#791F1F;
  --blue:#378ADD;--blue-l:#E6F1FB;--blue-d:#042C53;
  --green:#639922;--green-l:#EAF3DE;--green-d:#173404;
  --gray:#6b6b67;--gray-l:#f1efe8;
  --orange:#D85A30;--orange-l:#FDEEE8;--orange-d:#6B2310;
}
body{font-family:var(--body);color:var(--text);background:var(--bg);font-size:15px;max-width:680px;margin:0 auto;}

nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.25rem;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:50;}
.logo{font-family:var(--head);font-size:15px;font-weight:800;letter-spacing:-.03em;}
.logo span{color:var(--purple);}
.nav-badge{font-family:var(--mono);font-size:11px;color:var(--muted);padding:3px 8px;border:0.5px solid var(--border);border-radius:4px;}

.legend-strip{display:flex;gap:.8rem;flex-wrap:wrap;padding:.5rem 1.25rem;border-bottom:0.5px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--muted);}
.legend-item{display:flex;align-items:center;gap:.3rem;}
.legend-dot{width:8px;height:3px;border-radius:1px;}

.progress-wrap{padding:.5rem 1.25rem;border-bottom:0.5px solid var(--border);}
.progress-steps{display:flex;gap:3px;}
.pstep{flex:1;height:3px;border-radius:2px;background:var(--border);transition:background .3s;}
.pstep.done{background:var(--purple);}
.pstep.active{background:var(--amber);}
.pstep.ptheory{background:var(--blue);}
.pstep.ptool{background:var(--green);}
.pstep.pexercise{background:var(--orange);}
.pstep.prefl{background:var(--purple);}
.pstep.presult{background:var(--teal);}
.progress-label{font-family:var(--mono);font-size:10px;color:var(--hint);margin-top:.3rem;display:flex;justify-content:space-between;}

.screen{display:none;}.screen.on{display:block;}

.s-wrap{padding:1.25rem;max-width:640px;}
.kicker{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem;}
.kicker-dot{width:6px;height:6px;border-radius:50%;}
.big-q{font-family:var(--head);font-size:1.15rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin-bottom:.6rem;}
.sub{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:1.2rem;}
.card{background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.7rem;}
.card-q{font-size:14px;font-weight:500;line-height:1.55;margin-bottom:.6rem;}
.card-hint{font-size:12px;color:var(--hint);font-family:var(--mono);margin-bottom:.5rem;}

.opts{display:flex;flex-direction:column;gap:.5rem;}
.opt{border:0.5px solid var(--border2);border-radius:var(--rm);padding:.75rem 1rem;cursor:pointer;font-size:14px;font-weight:500;background:var(--bg);text-align:left;transition:all .15s;color:var(--text);line-height:1.4;}
.opt:hover{border-color:var(--purple);background:var(--purple-l);}
.opt.correct{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d);}
.opt.wrong{border-color:var(--red);background:var(--red-l);color:var(--red-d);}
.opt.sel{border-color:var(--purple);background:var(--purple-l);color:var(--purple-d);}

.reveal{border-radius:var(--rm);padding:.9rem 1rem;margin:.7rem 0;font-size:13px;line-height:1.7;display:none;}
.reveal.show{display:block;}
.reveal.good{background:var(--teal-l);border:0.5px solid var(--teal);color:var(--teal-d);}
.reveal.neutral{background:var(--purple-l);border:0.5px solid var(--purple);color:var(--purple-d);}
.reveal.warn{background:var(--amber-l);border:0.5px solid var(--amber);color:var(--amber-d);}
.reveal h4{font-size:13px;font-weight:600;margin-bottom:.4rem;}

.scale-row{display:flex;gap:.3rem;flex-wrap:wrap;margin:.4rem 0;}
.scale-btn{flex:1;min-width:32px;padding:.55rem .2rem;border:0.5px solid var(--border2);border-radius:var(--rm);cursor:pointer;font-size:11px;font-family:var(--mono);background:var(--bg);text-align:center;transition:all .15s;color:var(--muted);}
.scale-btn:hover{border-color:var(--purple);background:var(--purple-l);}
.scale-btn.sel{border-color:var(--purple);background:var(--purple-l);color:var(--purple-d);font-weight:600;}
.scale-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--hint);font-family:var(--mono);margin-bottom:.2rem;}

button.primary{font-family:var(--head);font-size:13px;font-weight:700;background:var(--purple);color:#fff;border:none;padding:10px 22px;border-radius:6px;cursor:pointer;transition:opacity .15s;}
button.primary:hover{opacity:.82;}
button.primary:disabled{opacity:.3;cursor:default;}
button.ghost{font-family:var(--body);font-size:13px;background:transparent;color:var(--muted);border:0.5px solid var(--border2);padding:9px 18px;border-radius:6px;cursor:pointer;margin-left:.5rem;}
button.ghost:hover{background:var(--bg2);}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem;}

.theory-block{background:var(--blue-l);border:0.5px solid var(--blue);border-radius:var(--r);padding:1.1rem 1.25rem;margin-bottom:.8rem;}
.theory-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--blue-d);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem;}
.theory-label-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);}
.theory-title{font-family:var(--head);font-size:1rem;font-weight:700;color:var(--blue-d);margin-bottom:.5rem;}
.theory-text{font-size:13px;color:var(--blue-d);line-height:1.75;margin-bottom:.8rem;}
.theory-text p{margin-bottom:.6rem;}
.theory-text p:last-child{margin-bottom:0;}
.theory-divider{height:0.5px;background:rgba(55,138,221,.2);margin:.8rem 0;}
.theory-evo{background:rgba(55,138,221,.12);border-radius:var(--rm);padding:.75rem .9rem;margin-bottom:.7rem;font-size:13px;color:var(--blue-d);line-height:1.7;}
.theory-evo-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:.3rem;}

.schema{background:var(--bg);border:0.5px solid var(--blue);border-radius:var(--rm);padding:.9rem 1rem;margin-bottom:.8rem;}
.schema-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:.6rem;}
.schema-flow{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem;}
.schema-box{background:var(--blue-l);border:0.5px solid var(--blue);border-radius:6px;padding:.4rem .7rem;font-size:12px;color:var(--blue-d);font-weight:500;text-align:center;line-height:1.3;}
.schema-arrow{color:var(--blue);font-size:14px;flex-shrink:0;}
.schema-result{background:var(--red-l);border:0.5px solid var(--red);border-radius:6px;padding:.4rem .7rem;font-size:12px;color:var(--red-d);font-weight:500;text-align:center;line-height:1.3;}
.schema-correct{background:var(--teal-l);border:0.5px solid var(--teal);border-radius:6px;padding:.4rem .7rem;font-size:12px;color:var(--teal-d);font-weight:500;text-align:center;line-height:1.3;}

.example-card{background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--rm);padding:.8rem .9rem;font-size:13px;line-height:1.6;}
.example-source{font-family:var(--mono);font-size:10px;color:var(--hint);margin-top:.4rem;}
.example-tag{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:3px;background:var(--red-l);color:var(--red-d);margin-top:.4rem;}
.real-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.5rem;}

.apply-box{background:var(--amber-l);border:0.5px solid var(--amber);border-radius:var(--rm);padding:.9rem 1rem;margin-bottom:.8rem;}
.apply-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--amber-d);margin-bottom:.4rem;}
.apply-q{font-size:14px;font-weight:500;color:var(--amber-d);line-height:1.55;margin-bottom:.6rem;}
.apply-opts{display:flex;flex-direction:column;gap:.4rem;}
.apply-opt{border:0.5px solid rgba(186,117,23,.3);border-radius:var(--rm);padding:.6rem .8rem;cursor:pointer;font-size:13px;background:rgba(255,255,255,.5);text-align:left;transition:all .15s;color:var(--amber-d);line-height:1.45;}
.apply-opt:hover{background:rgba(255,255,255,.8);}
.apply-opt.sel{background:rgba(83,74,183,.12);border-color:var(--purple);color:var(--purple-d);font-weight:600;}.apply-opt.sel-right{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d);}
.apply-opt.sel-wrong{background:var(--red-l);border-color:var(--red);color:var(--red-d);}
.apply-feedback{font-size:13px;margin-top:.5rem;line-height:1.6;padding:.6rem .8rem;border-radius:6px;display:none;}
.apply-feedback.show{display:block;}
.apply-feedback.ok{background:var(--teal-l);color:var(--teal-d);}
.apply-feedback.no{background:var(--red-l);color:var(--red-d);}

.social-box{background:var(--gray-l);border:0.5px solid var(--border2);border-radius:var(--rm);padding:.9rem 1rem;margin-bottom:.8rem;}
.social-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin-bottom:.5rem;}
.social-q{font-size:13px;color:var(--text);line-height:1.65;margin-bottom:.4rem;padding-left:.8rem;border-left:3px solid var(--border2);}

.tool-box{background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--rm);padding:.9rem 1rem;margin-bottom:.8rem;}
.tool-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.5rem;}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin-bottom:.5rem;}
.tool-cell{border-radius:6px;padding:.5rem .7rem;}
.tool-cell-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;display:block;}
.tool-cell-text{font-size:12px;line-height:1.5;}
.pmi-p{background:var(--teal-l);border:0.5px solid var(--teal);}
.pmi-p .tool-cell-label,.pmi-p .tool-cell-text{color:var(--teal-d);}
.pmi-m{background:var(--red-l);border:0.5px solid var(--red);}
.pmi-m .tool-cell-label,.pmi-m .tool-cell-text{color:var(--red-d);}
.pmi-i{background:var(--amber-l);border:0.5px solid var(--amber);}
.pmi-i .tool-cell-label,.pmi-i .tool-cell-text{color:var(--amber-d);}

.pmi-exercise{background:var(--green-l);border:0.5px solid var(--green);border-radius:var(--rm);padding:.9rem 1rem;margin-bottom:.8rem;}
.pmi-ex-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--green-d);margin-bottom:.4rem;}
.pmi-ex-q{font-size:14px;font-weight:500;color:var(--green-d);line-height:1.55;margin-bottom:.7rem;}
.pmi-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:.5rem;}
.pmi-field{border-radius:6px;padding:.5rem;}
.pmi-field label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:.3rem;}
.pmi-field textarea{min-height:70px;font-size:12px;padding:.4rem .5rem;}
.pmi-f-p{background:var(--teal-l);border:0.5px solid var(--teal);}
.pmi-f-p label{color:var(--teal-d);}
.pmi-f-m{background:var(--red-l);border:0.5px solid var(--red);}
.pmi-f-m label{color:var(--red-d);}
.pmi-f-i{background:var(--amber-l);border:0.5px solid var(--amber);}
.pmi-f-i label{color:var(--amber-d);}

.caf-exercise{background:var(--blue-l);border:0.5px solid var(--blue);border-radius:var(--rm);padding:.9rem 1rem;margin-bottom:.8rem;}
.caf-ex-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-d);margin-bottom:.4rem;}
.caf-ex-q{font-size:14px;font-weight:500;color:var(--blue-d);line-height:1.55;margin-bottom:.7rem;}
.caf-user-input{width:100%;font-family:var(--body);font-size:13px;color:var(--text);background:var(--bg);border:0.5px solid var(--blue);border-radius:var(--rm);padding:.7rem .9rem;resize:none;min-height:90px;line-height:1.6;}
.caf-user-input:focus{outline:none;border-color:var(--purple);}
.caf-reveal{display:none;margin-top:.7rem;}
.caf-reveal.show{display:block;}
.caf-categories{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem;}
.caf-cat{background:var(--bg);border:0.5px solid var(--border2);border-radius:6px;padding:.6rem .8rem;}
.caf-cat-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.3rem;}
.caf-cat-items{font-size:12px;color:var(--muted);line-height:1.6;}

textarea{font-family:var(--body);font-size:13px;color:var(--text);background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--rm);padding:.75rem 1rem;resize:none;width:100%;line-height:1.65;min-height:85px;}
textarea:focus{outline:none;border-color:var(--purple);}
.char-hint{font-family:var(--mono);font-size:11px;color:var(--hint);text-align:right;margin:.2rem 0 .6rem;}

.profile-card{background:var(--purple-l);border:0.5px solid var(--purple);border-radius:var(--r);padding:1.1rem 1.25rem;margin:1rem 0;}
.profile-title{font-family:var(--head);font-size:.95rem;font-weight:700;color:var(--purple-d);margin-bottom:.8rem;}
.profile-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem;}
.profile-icon{font-size:16px;flex-shrink:0;width:24px;text-align:center;}
.profile-info{flex:1;}
.profile-name{font-size:13px;font-weight:600;color:var(--purple-d);}
.profile-sub{font-size:12px;color:var(--purple);margin-top:1px;}
.profile-bar-t{width:120px;height:5px;background:rgba(83,74,183,.15);border-radius:3px;overflow:hidden;flex-shrink:0;}
.profile-bar-f{height:100%;border-radius:3px;background:var(--purple);transition:width .6s ease;}

.transfer-box{background:var(--green-l);border:0.5px solid var(--green);border-radius:var(--rm);padding:.9rem 1rem;margin:1rem 0;}
.transfer-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--green-d);margin-bottom:.5rem;}
.transfer-q{font-size:13px;color:var(--green-d);line-height:1.65;padding-left:.8rem;border-left:3px solid var(--green);margin-bottom:.4rem;}

.outcomes-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0;}
.outcome-card{border-radius:var(--rm);padding:.7rem .9rem;}
.outcome-card-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;display:block;}
.outcome-card ul{list-style:none;display:flex;flex-direction:column;gap:.25rem;}
.outcome-card li{font-size:12px;line-height:1.4;padding-left:.8rem;position:relative;}
.outcome-card li::before{content:'·';position:absolute;left:0;}
.oc-know{background:var(--blue-l);border:0.5px solid var(--blue);}
.oc-know .outcome-card-label,.oc-know li,.oc-know li::before{color:var(--blue-d);}
.oc-under{background:var(--purple-l);border:0.5px solid var(--purple);}
.oc-under .outcome-card-label,.oc-under li,.oc-under li::before{color:var(--purple-d);}
.oc-skill{background:var(--teal-l);border:0.5px solid var(--teal);}
.oc-skill .outcome-card-label,.oc-skill li,.oc-skill li::before{color:var(--teal-d);}
.oc-att{background:var(--amber-l);border:0.5px solid var(--amber);}
.oc-att .outcome-card-label,.oc-att li,.oc-att li::before{color:var(--amber-d);}


/* Shared course shell additions */
.toplink{font-family:var(--mono);font-size:11px;color:var(--muted);text-decoration:none;padding:3px 8px;border:.5px solid var(--border);border-radius:4px;}
.toplink:hover{background:var(--bg2);}
.course-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin:1rem 0;}
.course-card{border:.5px solid var(--border2);border-radius:var(--r);padding:1rem 1.1rem;text-decoration:none;color:var(--text);background:var(--bg);display:block;}
.course-card:hover{background:var(--bg2);border-color:var(--purple);}
.course-card-title{font-weight:800;font-size:1rem;margin-bottom:.35rem;color:var(--text);}
.course-card-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:.5rem;}
.course-card-text{font-size:13px;line-height:1.6;color:var(--muted);}
button.ghost:disabled{opacity:.3;cursor:default;}