/* Shared learning interface tokens; content remains owned by the course system. */
:root{--page:#f7f8f2;--paper:#fffefb;--green:#285b45;--green-deep:#203e30;--green-soft:#e8efe8;--ink:#263c31;--muted:#59685e;--line:#dce3d9;--code:#22392e;--focus:#8b580b;--radius:6px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--text-sm:14px;--text-body:17px;--text-title:clamp(29px,3vw,40px);--mono:Consolas,'Courier New','Ferbun Sans',Tahoma,monospace;color:var(--ink);background:var(--page)}
html{scroll-padding-top:24px}body{line-height:1.7}h1,h2,h3{line-height:1.55;letter-spacing:0;color:var(--ink)}h1{font-size:var(--text-title)}p{line-height:1.9}a{color:var(--green)}button,.button{background:var(--green);border-color:var(--green);min-height:44px;padding:9px 18px;font-size:14px;font-weight:600;border-radius:var(--radius)}button:hover,.button:hover{background:var(--green-deep);border-color:var(--green-deep)}button.secondary,.button.secondary{background:var(--paper);color:var(--green);border-color:#bdcbbf}.text-button{min-height:44px;padding:6px 0;background:transparent;border:0;color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}main{max-width:1440px;padding:28px 32px 40px}.skip{z-index:100;background:var(--paper);color:var(--ink);top:-100px}.skip:focus{top:8px}.eyebrow{font-size:12px;color:var(--muted);letter-spacing:0;margin:0 0 8px}.meta{font-size:14px;color:var(--muted)}
.site-header{padding:12px max(24px,calc((100% - 1376px)/2));min-height:70px;background:var(--green);border:0;color:#fff}.site-header .brand{color:#fff;flex-shrink:0}.brand-logo{height:32px;max-width:175px}.site-header nav{gap:24px;align-items:center;font-size:14px}.site-header nav>a,.site-header .text-button{color:#fff}.site-header nav>a:hover{color:#e5f1dc}.site-header .button.secondary{background:#fffefb;border-color:#fffefb;color:var(--green)}.site-header :focus-visible{outline-color:#f6d088}.course-menu{padding-inline:max(32px,calc((100% - 1376px)/2));background:#edf1e9;border-color:var(--line)}.course-menu a{font-size:13px;min-height:42px;padding-inline:20px}.site-footer{max-width:1376px;color:var(--muted);margin:0 auto;padding:20px 32px}.catalog-heading{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.8fr);gap:56px;padding:20px 0 32px;align-items:center}.catalog-heading h1{margin:6px 0 14px;max-width:780px;font-size:clamp(29px,3.1vw,42px);line-height:1.55}.intro-copy>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:16px}.intro-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:20px 0 12px}.catalog-jump{font-size:14px}.intro-copy .intro-note{font-size:13px;margin:0}.intro-index{display:grid;grid-template-columns:32px minmax(0,1fr);gap:18px 14px;border-inline-start:1px solid var(--line);padding-inline-start:28px}.intro-index>span{width:30px;height:30px;display:grid;place-items:center;background:var(--green-soft);border:1px solid #d4ded1;border-radius:50%;font-size:13px}.intro-index p{margin:0;font-size:13px;color:var(--muted)}.intro-index strong{display:block;font-size:15px;font-weight:700;color:var(--ink)}.catalog-tools{margin:28px 0 20px;gap:24px}.catalog-tools h2{font-size:24px}.catalog-tools form{width:320px}.catalog-tools label{color:var(--muted);font-size:12px}.course-grid{gap:22px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.course-card{display:flex;flex-direction:column;box-shadow:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);min-width:0}.course-card:hover{border-color:#acbfae}.course-art{height:135px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px 24px;background:#e8ede0;border-bottom:1px solid var(--line);direction:ltr}.course-card--css .course-art{background:#e7edf0}.course-card--general .course-art{background:#e9ebe4}.course-art img{width:100%;max-height:110px;object-fit:contain}.course-art .course-monogram{font:36px var(--mono);color:#4b6547}.course-card--css .course-monogram{color:#4b6874}.course-art-title{font:600 21px var(--mono);color:#3e5744}.course-art .free-label{top:10px;right:12px;letter-spacing:0;padding:2px 7px;font-size:11px;background:#fffefbcf;color:#3b5343}.course-card-body{padding:20px;display:flex;flex-direction:column;flex:1}.course-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.course-meta span+span{border-inline-start:1px solid var(--line);padding-inline-start:10px}.course-card-body h3{font-size:23px;margin:6px 0 8px}.course-card-body>p{font-size:14px;line-height:1.9;margin:0 0 20px;display:block;color:var(--muted)}.course-card-footer{margin-top:auto;padding-top:14px;align-items:center;min-height:52px;font-size:13px;color:var(--muted)}.course-card-footer a{font-weight:700;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:6px}.unavailable{color:#61685b;border:1px solid var(--line);padding:4px 9px;border-radius:4px}.is-upcoming .course-art{opacity:.8}.empty-state{padding:24px;border:1px solid var(--line);grid-column:1/-1}
/* One curriculum sidebar; the article keeps long lines and code inside its own width. */
.tutorial-shell{grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:start}.lesson-sidebar{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden;padding:0 12px 12px 4px;scrollbar-width:thin;scrollbar-color:#b5c4b6 transparent;overscroll-behavior:contain}.curriculum-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px 12px}.curriculum-heading h2{font-size:21px;margin:0}.curriculum-heading .eyebrow{font-size:11px}.lesson-sidebar nav{display:block;margin-top:8px}.lesson-sidebar nav .curriculum-overview{display:block;padding:10px 12px;border:1px solid var(--line);font-size:14px;text-decoration:none;margin:0 0 14px;background:var(--paper);border-radius:4px}.curriculum-search{font-size:12px;padding:0 8px;margin:8px 0;color:var(--muted)}.curriculum-search input{margin-top:6px;min-height:40px;font-size:13px;padding:8px 10px}.search-status{font-size:12px;color:var(--muted);margin:4px 8px}.search-status:empty{display:none}.curriculum-module{border-bottom:1px solid var(--line);margin-bottom:4px}.lesson-sidebar .curriculum-module summary{font-size:14px;font-weight:600;padding:11px 6px;line-height:1.8;display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none}.curriculum-module summary::before{content:'';width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);flex-shrink:0;margin-inline-end:3px}.curriculum-module[open] summary::before{transform:rotate(-45deg)}.curriculum-module summary>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}.module-count{font-size:11px;color:var(--muted);font-family:var(--mono)}.curriculum-links{display:grid;gap:2px;padding-bottom:8px}.curriculum-lesson{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border:1px solid transparent;border-inline-start:3px solid transparent;text-decoration:none;font-size:13px;line-height:1.9;min-height:44px;border-radius:3px;overflow-wrap:anywhere}.curriculum-lesson:hover{background:#edf2e8}.curriculum-lesson .lesson-number{font:12px/1.9 var(--mono);color:#5b6a5e;min-width:23px;flex-shrink:0}.curriculum-lesson>span[dir]{flex:1;min-width:0}.curriculum-lesson.active,.lesson-sidebar nav .curriculum-overview.active{background:#e2ebdf;color:#203e30;font-weight:700;border-color:#c1d1bd;border-inline-start:3px solid var(--green)}.curriculum-lesson.active .lesson-number{color:var(--green)}.completion-icon{flex-shrink:0;align-self:center}.bonus-heading{font-size:14px;line-height:1.8;margin:24px 8px 10px;color:var(--green);padding-block-start:12px;border-top:1px solid var(--line)}.lesson-content{padding:0 32px 24px;min-width:0;background:var(--paper);border-inline-start:1px solid var(--line)}html[dir="rtl"] .lesson-content{border-right:1px solid var(--line)}.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 24px;font-size:12px;color:var(--muted)}.breadcrumbs a{color:#49634f}.lesson-heading{margin-bottom:24px;max-width:800px}.lesson-heading h1{font-size:clamp(27px,2.7vw,36px);line-height:1.65;margin:6px 0 10px;overflow-wrap:anywhere}.lesson-module-name{font-size:13px;color:var(--muted);margin:0}.lesson-text{font-size:var(--text-body);line-height:2;max-width:800px;overflow-wrap:anywhere}.lesson-text p{line-height:2;margin:14px 0}.lesson-text ul,.lesson-text ol{padding-inline-start:24px;line-height:2}.lesson-text li{margin:6px 0}.lesson-text blockquote{border-inline-start:3px solid #92ac84;background:#eff4e9;padding:6px 18px;margin:20px 0;color:#3b523b}.lesson-text a{overflow-wrap:anywhere;unicode-bidi:plaintext}.lesson-text :not(pre)>code{display:inline;direction:ltr;unicode-bidi:isolate;font-family:var(--mono);font-size:.88em;background:#eaf0e8;color:#31553c;border:1px solid #d9e2d5;padding:1px 5px;border-radius:3px;box-decoration-break:clone}.lesson-part{padding:0 0 20px;scroll-margin-top:24px}.lesson-part h2{font-size:24px;margin:28px 0 12px;max-width:800px}.lesson-part h3{font-size:19px}.lesson-summary{font-size:16px;color:var(--muted);margin:0 0 24px}.lesson-video-wrap{max-width:860px}.lesson-video{display:block;width:100%;aspect-ratio:16/9;height:auto;min-height:0;border:1px solid var(--line);border-radius:5px;background:#e9eee8;margin:20px 0}.outline{max-width:800px;padding:12px 0;border-color:var(--line);margin:20px 0 26px}.outline summary{font-size:14px;color:var(--green);font-weight:600}.outline a{font-size:14px;line-height:1.9;margin:8px 0}.lesson-part figure{margin:20px 0;max-width:800px}.lesson-part figure img{max-height:none;border-radius:4px;width:auto;max-width:100%}.lesson-part figcaption{color:var(--muted);font-size:13px}.lesson-pagination{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;padding-top:20px}.lesson-pagination a{display:flex;flex-direction:column;align-items:start;gap:6px;border:1px solid var(--line);border-radius:5px;padding:14px 16px;font-size:14px;font-weight:600;line-height:1.8;min-width:0;overflow-wrap:anywhere}.lesson-pagination a:last-child{align-items:end;text-align:end;background:#edf3e9}.pagination-label{font-size:12px;color:var(--muted);font-weight:400}.completion{margin-top:12px;padding-top:20px}.completion p{font-size:14px}.progress-meter{font-size:13px;color:var(--muted)}.progress-meter strong{color:var(--green)}
/* Overview uses published records, never fixed curriculum counts. */
.course-overview h1{margin:0 0 12px;font-size:40px}.overview-summary{max-width:710px;font-size:18px;color:var(--muted);margin:0 0 18px}.course-facts{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--muted)}.course-facts li+li{border-inline-start:1px solid var(--line);padding-inline-start:16px}.overview-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}.overview-actions>a:not(.button){font-size:14px}.course-essentials{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-block:1px solid var(--line);padding:12px 0 20px;margin:28px 0}.course-essentials h2{font-size:18px;margin:12px 0}.course-essentials ul{padding-inline-start:20px;font-size:14px;line-height:2.1;margin:0}.course-essentials p{font-size:14px;margin:0 0 8px}.course-introduction{border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 28px}.course-introduction>summary{font-size:15px;color:var(--green);font-weight:600;cursor:pointer;padding:8px 0}.course-introduction .lesson-text{padding-top:12px}.overview-curriculum>h2{font-size:24px;margin:0 0 4px}.overview-curriculum>.meta{margin:0 0 18px}.course-module{padding:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;margin:12px 0;background:var(--paper)}.course-module>summary{padding:14px 16px;font-size:16px;font-weight:600;line-height:1.8;cursor:pointer;display:flex;align-items:center;gap:12px;list-style:none;background:#f4f6ef}.course-module>summary:before{content:'';width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);flex-shrink:0}.course-module[open]>summary:before{transform:rotate(-45deg)}.course-module>summary>span{flex:1;min-width:0}.course-module summary small{font-size:12px;color:var(--muted);margin:0;white-space:nowrap;font-weight:400}.course-module .course-lessons{list-style:none;margin:0;padding:0!important}.course-lessons li{padding:0;border:0}.course-lessons li+li{border-top:1px solid #edf0e8}.course-lessons a{display:flex;align-items:baseline;gap:14px;padding:12px 18px;font-size:14px;line-height:1.9;font-weight:400}.course-lessons a:hover{background:#f0f5ec}.course-lessons a>span{flex:1;min-width:0;overflow-wrap:anywhere}.course-lessons .lesson-number{min-width:25px;font:12px var(--mono);color:var(--muted)}.course-lessons svg{align-self:center;flex-shrink:0}
/* Code always scrolls locally and keeps Kurdish strings intact. */
.code-example,.rich-code-block{max-width:100%;min-width:0;margin:22px 0;border:1px solid #cdd8d0;border-radius:5px;overflow:hidden;background:var(--paper)}.code-heading,.rich-code-heading{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#edf2e9;border-bottom:1px solid #d2ddcf;min-height:48px;color:#405a46;font-size:13px;flex-wrap:wrap}.code-heading h3{margin:0;font-size:14px}.code-heading>bdi{font:12px var(--mono);color:#526954}.code-heading button,.rich-code-heading button{min-height:34px;margin-inline-start:auto;margin-inline-end:0!important;padding:4px 10px;font-size:12px;color:#2d573e;background:var(--paper);border:1px solid #b7c9b6}.code-heading button:hover,.rich-code-heading button:hover{background:#e1ebdc;color:var(--ink)}.copy-status{font-size:12px;color:#345c3a}.copy-status:empty{display:none}.code-example pre,.lesson-text pre,.lesson-text .rich-code-block pre{direction:ltr;text-align:left;unicode-bidi:isolate;margin:0;padding:20px;background:var(--code);color:#edf4e7;font:15px/1.9 var(--mono);tab-size:4;white-space:pre;overflow-x:auto;overscroll-behavior-inline:contain;max-width:100%;min-width:0;border:0;border-radius:0}.code-example pre code,.lesson-text pre code,.lesson-text .rich-code-block pre code{font:inherit;color:inherit;white-space:inherit;direction:ltr;background:none;border:0;display:block;padding:0}.syntax-tag{color:#b7d5ff}.syntax-attribute{color:#e9cf94}.syntax-string{color:#d2e8a7}.syntax-comment{color:#b3c1b8;font-style:italic}.syntax-keyword{color:#e0bce9}.playground{padding:12px 16px}.playground summary{display:flex;gap:8px;align-items:center;cursor:pointer;min-height:32px}.playground label{font-size:13px}.playground textarea{direction:ltr;text-align:left;white-space:pre;overflow-x:auto;font:14px/1.8 var(--mono);max-width:100%;min-height:220px}.playground iframe{width:100%;border:1px solid var(--line);border-radius:3px;min-height:190px}.playground p{font-size:13px}.lesson-text .rich-code-block{max-width:100%}.mobile-curriculum-bar{display:none}.curriculum-dialog{padding:0;border:0;background:var(--page);max-height:100dvh}.curriculum-dialog::backdrop{background:#17291f80}
@media(min-width:1001px){.curriculum-dialog{display:none}}
@media(max-width:1100px) and (min-width:1001px){.tutorial-shell{grid-template-columns:270px minmax(0,1fr);gap:24px}.lesson-content{padding-inline:24px}}
@media(max-width:1000px){main{padding:24px}.catalog-heading{gap:28px}.intro-index{padding-inline-start:20px}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-shell{display:block}.lesson-sidebar{position:static;max-height:none;overflow:visible;margin:0 0 20px}.lesson-content,html[dir="rtl"] .lesson-content{border:0;padding:0 16px 20px}.mobile-curriculum-bar{display:flex;align-items:center;gap:16px;margin:0 0 20px;min-width:0}.mobile-curriculum-bar>span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-curriculum-bar button{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:13px}.curriculum-dialog{position:fixed;inset:0 0 0 auto;width:min(92vw,390px);height:100dvh;max-width:none;margin:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px}.curriculum-dialog .lesson-sidebar{margin:0;padding:0;overflow:visible;max-height:none}.drawer-close{font-size:12px;min-height:40px;padding:5px 10px}.course-essentials{gap:24px}}
@media(max-width:600px){main{padding:20px 16px 32px}.site-header{padding:10px 16px;gap:14px;flex-wrap:wrap}.site-header nav{gap:12px;font-size:12px;flex-wrap:wrap}.brand-logo{height:28px;max-width:140px}.site-header .button.secondary{font-size:12px;padding:6px 10px}.course-menu{padding-inline:16px}.course-menu-label{font-size:11px}.course-menu a{padding-inline:14px}.catalog-heading{grid-template-columns:1fr;gap:24px;padding:8px 0 26px}.catalog-heading h1{font-size:29px}.intro-copy>p:not(.eyebrow){font-size:15px}.intro-index{border:0;border-top:1px solid var(--line);padding:20px 0 0;gap:12px}.intro-actions{gap:16px}.intro-actions .button{width:100%;text-align:center}.catalog-tools{align-items:stretch;gap:14px;margin:24px 0 18px}.catalog-tools form{width:100%}.course-grid{grid-template-columns:1fr;gap:18px}.course-art{height:120px}.course-card-body{padding:18px}.lesson-content,html[dir="rtl"] .lesson-content{padding:0}.lesson-heading h1{font-size:27px}.lesson-text{font-size:17px}.lesson-part h2{font-size:22px}.course-overview h1{font-size:34px}.overview-summary{font-size:16px}.course-essentials{grid-template-columns:1fr;gap:12px;margin:24px 0}.course-facts{gap:8px 12px;font-size:12px}.course-facts li+li{padding-inline-start:12px}.overview-actions{gap:16px}.overview-actions .button{width:100%;text-align:center}.course-module>summary{font-size:14px;padding:12px}.course-lessons a{padding:12px;font-size:14px;gap:10px}.lesson-pagination{gap:10px}.lesson-pagination a{font-size:13px;padding:12px}.code-example pre,.lesson-text pre,.lesson-text .rich-code-block pre{font-size:14px;padding:16px}.code-heading,.rich-code-heading{gap:8px;padding:8px 12px}.site-footer{padding:20px 16px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}body.curriculum-open{overflow:hidden}
@media(min-width:1001px){.course-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}}
.site-header .button.secondary:hover{background:#edf4e7;color:#23432f}.course-menu-label{color:var(--muted)}
.site-header nav>a:not(.button){display:inline-flex;align-items:center;min-height:44px}.code-heading button,.rich-code-heading button{min-height:40px}