.cpp-course{--cpp-ink:#203b5f;--cpp-blue:#2a4a7a;--cpp-rule:#d7e3ef;--cpp-muted:#5b718a;--cpp-paper:#f7f9fc;color:var(--cpp-ink);background:var(--cpp-paper);padding-bottom:74px}.cpp-course__hero{border-bottom:1px solid var(--cpp-rule);padding-block:clamp(34px,5.5vw,78px) clamp(28px,4vw,48px)}.cpp-course__eyebrow{color:#2c659d;align-items:center;gap:9px;margin-bottom:16px;font-size:13px;font-weight:700;display:flex}.cpp-course__hero h1{letter-spacing:-.045em;max-width:850px;margin:0 0 18px;font:700 clamp(36px,4.7vw,65px)/1.25 Space Grotesk,sans-serif}html[lang=ar] .cpp-course__hero h1{letter-spacing:0;font:650 clamp(34px,4.7vw,60px)/1.5 IBM Plex Sans Arabic,sans-serif}.cpp-course__lead{max-width:730px;margin:0 0 11px;font-size:clamp(17px,1.6vw,20px);line-height:1.95}.cpp-course__note{max-width:760px;color:var(--cpp-muted);margin:0;font-size:14px;line-height:1.9}.cpp-course__toolstrip{flex-wrap:wrap;gap:8px 12px;margin-top:25px;display:flex}.cpp-course__toolstrip a{color:#285e91;background:#fff;border:1px solid #c7d9e9;border-radius:6px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:9px 13px;font-size:13px;font-weight:700;display:inline-flex}.cpp-course__toolstrip a:hover{background:#edf5fc;border-color:#82a9cd}.cpp-course__workspace{grid-template-columns:minmax(230px,282px) minmax(0,1fr);align-items:start;gap:clamp(24px,5vw,76px);padding-block:34px 60px;display:grid}.cpp-course__sidebar{min-width:0;position:sticky;top:15px}.cpp-course__progress{background:#eaf1f8;border:1px solid #d5e2ef;border-radius:8px;margin-bottom:13px;padding:18px}.cpp-course__progress-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px;font-size:13px;display:flex}.cpp-course__progress-head span{white-space:nowrap;font:700 14px IBM Plex Mono,monospace}.cpp-course__meter{background:#d1ddea;border-radius:99px;width:100%;height:6px;overflow:hidden}.cpp-course__meter>span{background:#2a4a7a;height:100%;transition:width .18s;display:block}.cpp-course__progress small{color:var(--cpp-muted);margin-top:8px;font-size:12px;display:block}.cpp-course__stages{border-top:1px solid var(--cpp-rule);flex-direction:column;display:flex}.cpp-course__stage{cursor:pointer;text-align:start;width:100%;min-height:62px;color:var(--cpp-ink);border:0;border-bottom:1px solid var(--cpp-rule);background:0 0;border-inline-start:3px solid #0000;align-items:center;gap:12px;padding:11px 10px;display:flex}.cpp-course__stage:hover{background:#edf3fa}.cpp-course__stage.is-current{background:#e5eef8;border-inline-start-color:#2a4a7a}.cpp-course__stage-number{color:#3b648b;border:1px solid #c4d5e5;border-radius:6px;flex:none;justify-content:center;align-items:center;width:33px;height:33px;font:700 12px IBM Plex Mono,monospace;display:flex}.cpp-course__stage.is-current .cpp-course__stage-number{color:#fff;background:#2a4a7a;border-color:#2a4a7a}.cpp-course__stage>span:last-child{min-width:0;display:block}.cpp-course__stage small{color:#69819c;font-size:11px;line-height:1.5;display:block}.cpp-course__stage strong{font-size:13px;font-weight:650;line-height:1.6;display:block}.cpp-course__reset{color:#607b97;cursor:pointer;background:0 0;border:0;align-items:center;gap:7px;padding:15px 6px;font-size:12px;display:flex}.cpp-course__reset:hover{color:#233f60}.cpp-course__mobile-label,.cpp-course__select-wrap{display:none}.cpp-course__lesson{border:1px solid var(--cpp-rule);background:#fff;border-radius:10px;min-width:0;padding:clamp(22px,3.5vw,40px)}.cpp-course__lesson-top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.cpp-course__step-label{color:#47709b;font-size:12px;font-weight:700}.cpp-course__category{color:#6b829a;font-size:12px;font-weight:700}.cpp-course__lesson-title{letter-spacing:-.02em;color:#1d395d;margin:0 0 7px;scroll-margin-top:18px;font-size:clamp(25px,2.8vw,36px);font-weight:700;line-height:1.5}html[lang=ar] .cpp-course__lesson-title{letter-spacing:0}.cpp-course__lesson-title:focus{outline:none}.cpp-course__summary{color:#5d738b;margin:0 0 24px;font-size:15px;line-height:1.9}.cpp-course__outcome{background:#f0f5fa;border-inline-start:3px solid #5b94c8;padding:18px 19px}.cpp-course__outcome h3{color:#28547e;align-items:center;gap:9px;margin:0 0 7px;font-size:14px;display:flex}.cpp-course__outcome p{margin:0;font-size:14px;line-height:1.85}.cpp-course__section{margin-top:29px}.cpp-course__section>h3,.cpp-course__code-heading h3{color:#233d5d;margin:0 0 13px;font-size:18px;font-weight:700}.cpp-course__learn-list{color:#344f6f;margin:0;padding-inline-start:20px}.cpp-course__learn-list li{margin:0 0 7px;padding-inline-start:3px;font-size:14px;line-height:1.95}.cpp-course__resources{border-top:1px solid var(--cpp-rule)}.cpp-course__resources>a{border-bottom:1px solid var(--cpp-rule);color:#2c5d89;grid-template-columns:33px minmax(0,1fr) 18px;align-items:center;gap:11px;min-height:76px;padding:13px 3px;text-decoration:none;display:grid}.cpp-course__resources>a:hover strong{text-underline-offset:4px;text-decoration:underline}.cpp-course__resource-index{color:#90a8be;font:700 13px IBM Plex Mono,monospace}.cpp-course__resources strong{font-size:14px;line-height:1.7;display:block}.cpp-course__resources small{color:#627993;margin-top:2px;font-size:12px;line-height:1.65;display:block}.cpp-course__code-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.cpp-course__code-heading h3{margin:0;font-family:IBM Plex Mono,monospace}.cpp-course__code-heading button{color:#315c83;cursor:pointer;background:#fff;border:1px solid #c9d9e8;border-radius:6px;align-items:center;gap:7px;min-height:40px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-flex}.cpp-course__code-heading button:hover{background:#eaf3fc}.cpp-course__code{color:#eff5ff;tab-size:4;background:#172a43;border:1px solid #263e5c;border-radius:7px;max-width:100%;margin:0;padding:21px;font:500 13px/1.85 IBM Plex Mono,monospace;overflow:auto}.cpp-course__copy-status{color:#326b94;min-height:0;margin:3px 0;font-size:12px}.cpp-course__code-note{color:#627891;margin:10px 0 0;font-size:13px;line-height:1.8}.cpp-course__code-actions{flex-wrap:wrap;gap:9px 18px;margin-top:13px;display:flex}.cpp-course__code-actions a{color:#fff;background:#2a4a7a;border-radius:6px;align-items:center;gap:6px;min-height:44px;padding:11px 14px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.cpp-course__code-actions a+a{color:#28557e;background:#eaf2fa}.cpp-course__code-actions a:hover{filter:brightness(.94)}.cpp-course__practice{background:#f2f7fb;border:1px solid #cbddeb;border-radius:8px;margin-top:32px;padding:22px}.cpp-course__practice-title{align-items:center;gap:9px;display:flex}.cpp-course__practice h3{margin:0;font-size:19px}.cpp-course__practice>p{color:#3a5572;margin:13px 0 18px;font-size:14px;line-height:1.9}.cpp-course__practice h4{margin:0 0 8px;font-size:14px}.cpp-course__task{cursor:pointer;color:#324f6b;align-items:start;gap:11px;margin:6px 0;padding:10px 0;font-size:13px;line-height:1.8;display:flex}.cpp-course__task input{opacity:0;width:1px;height:1px;position:absolute}.cpp-course__task-check{color:#63809b;background:#fff;border:1px solid #9bb7ce;border-radius:5px;flex:none;place-items:center;width:25px;height:25px;margin-top:0;display:grid}.cpp-course__task input:checked+.cpp-course__task-check{color:#fff;background:#2a4a7a;border-color:#2a4a7a}.cpp-course__task input:focus-visible+.cpp-course__task-check{outline-offset:3px;outline:3px solid #5bc0ff}.cpp-course__practice .cpp-course__save-hint{color:#627b94;margin:10px 0 0;font-size:12px}.cpp-course__question{border-bottom:1px solid var(--cpp-rule);border-top:1px solid var(--cpp-rule);margin-top:19px}.cpp-course__question summary{cursor:pointer;color:#2b527c;justify-content:space-between;align-items:center;gap:18px;padding:18px 2px;font-size:14px;font-weight:700;line-height:1.85;list-style:none;display:flex}.cpp-course__question summary::-webkit-details-marker{display:none}.cpp-course__question[open] summary>svg{transform:rotate(180deg)}.cpp-course__question>p{color:#4a6480;margin:0;padding:0 2px 17px;font-size:14px;line-height:1.85}.cpp-course__lesson-actions{justify-content:space-between;gap:12px;margin-top:25px;display:flex}.cpp-course__lesson-actions button{color:#355e86;cursor:pointer;background:#fff;border:1px solid #c7d8e9;border-radius:6px;align-items:center;gap:9px;min-height:44px;padding:10px 13px;font-size:13px;font-weight:700;display:inline-flex}.cpp-course__lesson-actions .cpp-course__next{color:#fff;background:#2a4a7a;border-color:#2a4a7a}.cpp-course__lesson-actions button:disabled{cursor:not-allowed;opacity:.45}.cpp-course__bottom{border-top:1px solid var(--cpp-rule);grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);padding-top:37px;display:grid}.cpp-course__bottom h2{margin:0 0 15px;font-size:clamp(20px,2.2vw,27px);line-height:1.6}.cpp-course__bottom ol{margin:0;padding-inline-start:22px}.cpp-course__bottom li,.cpp-course__bottom p{color:#4c6580;margin-bottom:10px;font-size:14px;line-height:1.95}.cpp-course__references>a{color:#286399;align-items:center;gap:7px;margin:0 15px 16px 0;font-size:13px;font-weight:700;display:inline-flex}.cpp-course__references h3{margin:15px 0 5px;font-size:17px;line-height:1.7}.cpp-course a:focus-visible,.cpp-course button:focus-visible,.cpp-course summary:focus-visible,.cpp-course select:focus-visible{outline-offset:3px;outline:3px solid #5bc0ff}@media (max-width:940px){.cpp-course__workspace{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:23px}.cpp-course__sidebar{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:11px;display:grid;position:static}.cpp-course__progress{grid-column:1/-1;margin-bottom:0}.cpp-course__stages{display:none}.cpp-course__select-wrap{grid-column:1;display:block;position:relative}.cpp-course__mobile-label{grid-column:1/-1;margin:3px 0 -8px;font-size:13px;font-weight:700;display:block}.cpp-course__select-wrap select{appearance:none;color:#244869;padding:10px 13px;background:#fff;border:1px solid #c6d6e6;border-radius:6px;width:100%;min-height:49px;padding-inline-end:38px;font:600 13px IBM Plex Sans Arabic,Manrope,sans-serif}.cpp-course__select-wrap>svg{pointer-events:none;inset-inline-end:11px;position:absolute;top:16px}.cpp-course__reset{grid-area:3/2;min-height:49px;margin:0}}@media (max-width:620px){.cpp-course__hero{padding-block:32px 27px}.cpp-course__hero h1{font-size:35px}html[lang=ar] .cpp-course__hero h1{font-size:34px;line-height:1.5}.cpp-course__lead{font-size:16px}.cpp-course__note{font-size:13px}.cpp-course__workspace{padding-bottom:40px}.cpp-course__lesson{padding:19px 15px}.cpp-course__lesson-title{font-size:25px}.cpp-course__outcome{padding:14px}.cpp-course__practice{padding:18px 13px}.cpp-course__code{padding:15px 11px;font-size:11px}.cpp-course__bottom{grid-template-columns:1fr;gap:25px}.cpp-course__reset{padding-inline:3px;font-size:11px}.cpp-course__toolstrip a{flex:1}}@media (max-width:365px){.cpp-course__sidebar{grid-template-columns:minmax(0,1fr)}.cpp-course__reset{grid-area:auto/1}}@media (prefers-reduced-motion:reduce){.cpp-course__meter>span{transition:none}}.cpp-course__syllabus-label{color:#275c87;background:#eff5fb;border:1px solid #c4d7e9;border-radius:6px;align-items:center;gap:8px;margin:20px 0 0;padding:8px 11px;font-size:12px;font-weight:700;display:inline-flex}.cpp-course__sidebar{scrollbar-width:thin;scrollbar-color:#bbcede transparent;max-height:calc(100vh - 34px);overflow-y:auto}.cpp-course__lesson-top{align-items:flex-start}.cpp-course__category{text-align:end;max-width:59%;line-height:1.8}.cpp-course__guided-steps{border-top:1px solid #dce6f0}.cpp-course__guided-steps p{color:#354f6e;border-bottom:1px solid #dce6f0;align-items:flex-start;gap:14px;margin:0;padding:15px 0;font-size:15px;line-height:1.95;display:flex}.cpp-course__guided-steps p>span{color:#628bb0;flex:none;font:700 12px/2 IBM Plex Mono,monospace}.cpp-course__output{background:#eef4f9;border:1px solid #d3e1ee;border-radius:6px;margin-top:14px}.cpp-course__output summary{cursor:pointer;color:#315b86;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:12px 15px;font-size:13px;font-weight:700;list-style:none;display:flex}.cpp-course__output summary::-webkit-details-marker{display:none}.cpp-course__output[open] summary>svg{transform:rotate(180deg)}.cpp-course__output pre{white-space:pre-wrap;color:#28496b;background:#fff;border-top:1px solid #d3e1ee;margin:0;padding:13px 16px;font:500 12px/1.8 IBM Plex Mono,monospace;overflow:auto}.cpp-course__quiz{border-top:1px solid #d5e2ee;margin-top:31px;padding-top:25px}.cpp-course__quiz h3{margin:0 0 8px;font-size:19px;line-height:1.65}.cpp-course__quiz>p{color:#49647f;margin:0 0 17px;font-size:15px;line-height:1.85}.cpp-course__choices{gap:9px;display:grid}.cpp-course__choice{color:#2c486b;text-align:start;cursor:pointer;background:#fff;border:1px solid #cbdbea;border-radius:7px;align-items:center;gap:13px;width:100%;min-height:54px;padding:12px 14px;font-size:14px;line-height:1.7;display:flex}.cpp-course__choice>span{color:#6685a4;border:1px solid #c6d8e9;border-radius:5px;flex:none;place-items:center;width:27px;height:27px;font:700 12px IBM Plex Mono,monospace;display:grid}.cpp-course__choice:hover:not(:disabled){background:#f3f8fd;border-color:#7aa6cf}.cpp-course__choice:disabled{cursor:default}.cpp-course__choice.is-correct{background:#eef7f2;border-color:#4e8b71}.cpp-course__choice.is-correct>span{color:#236b4e;border-color:#8eb69e}.cpp-course__choice.is-wrong{background:#fbf5f2;border-color:#c9a093}.cpp-course__quiz .cpp-course__quiz-feedback{color:#6e5949;background:#f8f3ef;border-inline-start:3px solid #c6a080;margin:14px 0 0;padding:12px 14px;font-size:13px;line-height:1.85}.cpp-course__quiz .cpp-course__quiz-feedback.is-correct{color:#245b44;background:#edf6f1;border-inline-start-color:#4e8b71}.cpp-course__resources-optional{border-top:1px solid #d8e4ef;margin-top:24px}.cpp-course__resources-optional summary{cursor:pointer;color:#38648c;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;font-size:13px;font-weight:700;line-height:1.7;list-style:none;display:flex}.cpp-course__resources-optional summary::-webkit-details-marker{display:none}.cpp-course__resources-optional[open] summary svg{transform:rotate(180deg)}.cpp-course__resources-optional>p{color:#607993;margin:0 0 11px;font-size:12px;line-height:1.85}.cpp-course__references-extra{margin-top:21px}.cpp-course__references-extra>a{color:#275f8c;align-items:center;gap:6px;padding:10px 15px 10px 0;font-size:13px;font-weight:700;display:inline-flex}@media (max-width:940px){.cpp-course__sidebar{max-height:none;overflow:visible}}@media (max-width:620px){.cpp-course__lesson-top{flex-wrap:wrap;gap:9px}.cpp-course__category{text-align:start;max-width:100%;font-size:11px}.cpp-course__guided-steps p{gap:10px;font-size:14px}.cpp-course__choice{padding:11px;font-size:13px}.cpp-course__syllabus-label{font-size:11px}}
