*{box-sizing:border-box} :root{--ink:#202825;--muted:#818781;--green:#285b44;--lime:#c7eea3;--line:#e7eae5;--page:#f7f8f5;--white:#fff;--font:'DM Sans',sans-serif;--heading:'Manrope',sans-serif;--mono:'JetBrains Mono',monospace}body{margin:0;color:var(--ink);background:var(--page);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible{outline:3px solid #6caa55;outline-offset:4px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #6caa55;outline-offset:2px}button svg,a svg{flex-shrink:0}button{border:0;background:none}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:fixed;top:-60px;left:20px;padding:12px;background:white;z-index:100}.skip-link:focus{top:12px}.sidebar{width:240px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:33px 21px 0;z-index:20}.brand{font-family:var(--heading);font-size:29px;font-weight:800;letter-spacing:-1.4px;display:flex;align-items:center;line-height:1;gap:10px;padding-left:10px}.brand-icon{display:grid;place-items:center;width:36px;height:36px;background:#284d3b;color:#d0efa8;font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:-2px;border-radius:10px;padding-right:2px}.brand-dot{color:#568a42;margin-left:-10px}.workspace-label{font-size:9px;color:#959a94;letter-spacing:1.6px;font-weight:700;margin:50px 13px 16px}.nav-item{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:8px;color:#767d75;font-weight:500;margin-bottom:5px;font-size:13px}.nav-item:hover{background:#f5f7f2;color:#2d4936}.nav-item.active{background:#eaf1e4;color:#325a32;font-weight:650}.nav-item .icon{width:18px;height:18px}.nav-divider{margin:22px 13px 14px;border-top:1px solid #edf0e9}.nav-caption{font-size:9px;letter-spacing:1.5px;color:#a0a59d;margin:23px 14px 14px;font-weight:700}.nav-count{margin-left:auto;font-size:10px;background:#e2ead9;padding:2px 6px;border-radius:5px}.sidebar-bottom{margin-top:auto;padding-top:42px}.sidebar-note{background:#f6f8f1;border:1px solid #edf0e3;border-radius:12px;padding:21px 18px;margin:0 3px 25px;position:relative;overflow:hidden}.note-spark{font-size:32px;color:#5d7b4e;display:block;line-height:1;margin-bottom:13px}.sidebar-note h3{font-family:var(--heading);font-size:13px;line-height:1.7;margin:0;font-weight:750;letter-spacing:-.2px}.sidebar-note p{font-size:11px;color:#8a9281;line-height:1.8;margin:9px 0 20px}.sidebar-note a{display:flex;justify-content:space-between;font-size:10px;color:#47713f;font-weight:700}.sidebar-note a span{font-size:15px;line-height:12px}.profile{display:flex;align-items:center;width:calc(100% + 42px);margin-left:-21px;border-top:1px solid var(--line);padding:20px 22px;text-align:left;gap:10px}.avatar{width:35px;height:35px;border-radius:50%;background:#eee9dd;color:#776a4b;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:650;flex-shrink:0;border:3px solid white;box-shadow:0 0 0 1px #ebeae3}.profile strong{font-size:10px;font-weight:650;display:block}.profile small{font-size:8px;color:#9aa096;display:block;margin-top:4px}.profile-more{margin-left:auto;font-size:21px}.app-shell{margin-left:240px}.topbar{height:82px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.72);padding:0 43px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{display:flex;gap:17px;font-size:11px;align-items:center}.breadcrumb>span:first-child{color:#959b92}.breadcrumb-slash{color:#c3c8be}.breadcrumb strong{font-weight:500}.topbar-actions{display:flex;align-items:center;gap:23px}.search-trigger{display:flex;align-items:center;gap:10px;color:#979d94;font-size:11px;padding:5px}.search-trigger .icon{width:16px;height:16px}.search-icon{height:16px}.search-trigger kbd{font-family:inherit;display:grid;place-items:center;border:1px solid #e5e8df;border-radius:4px;width:20px;height:21px;margin-left:52px;font-size:10px;color:#9ba194}.topbar-divider{height:22px;width:1px;background:#e4e7e0}.icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:#858c80}.icon-button:hover{background:#eaf0e3;color:var(--green)}.help-button .icon{width:18px;height:18px}.avatar-small{width:31px;height:31px;font-size:10px}.mobile-menu{display:none}main{max-width:1510px;padding:38px 43px 28px;margin:auto;min-height:calc(100vh - 140px)}main:focus{outline:none}.page-eyebrow{display:flex;align-items:center;gap:8px;text-transform:uppercase;font-size:9px;letter-spacing:1.65px;color:#819071;font-weight:650;margin-bottom:9px}.small-dot{height:5px;width:5px;border-radius:50%;background:#84a966}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.page-heading h1{font-family:var(--heading);font-size:27px;font-weight:750;letter-spacing:-1.1px;margin:0 0 9px;line-height:1.3}.page-heading p{color:#92988d;font-size:11px;margin:0;line-height:1.8}.date-label{color:#8f9687;font-size:10px;display:flex;gap:7px;align-items:center;padding-top:9px}.date-label .icon{height:14px;width:14px}.hero{background:#eaf0df;border:1px solid #e2e9d5;border-radius:14px;min-height:244px;display:grid;grid-template-columns:1fr 43%;align-items:center;padding:31px 33px;position:relative;overflow:hidden;margin-bottom:29px}.hero:after{content:'';position:absolute;right:-63px;bottom:-180px;width:380px;height:380px;border-radius:50%;border:1px solid #d9e4cb;pointer-events:none}.hero-copy{z-index:1}.hero-tag{display:flex;align-items:center;gap:6px;color:#6d805b;font-size:9px;font-weight:600;letter-spacing:.3px;margin-bottom:14px}.hero-tag .icon{width:13px;height:13px}.hero h2{font-family:var(--heading);font-weight:800;font-size:31px;letter-spacing:-1.3px;line-height:1.28;margin:0 0 12px;max-width:400px}.hero h2 em{font-style:normal;color:#5b8040}.hero p{font-size:10px;color:#89917d;line-height:1.85;max-width:320px;margin:0 0 19px}.button{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 17px;border-radius:7px;font-size:11px;font-weight:600;line-height:1.4;transition:background .15s,transform .15s}.button:active{transform:translateY(1px)}.button .icon{width:14px;height:14px}.button-primary{background:#2c533b;color:#fff;box-shadow:0 2px 2px #284b2510}.button-primary:hover{background:#3e694a}.button-secondary{background:white;border-color:#e2e7dc;color:#5b6754}.button-secondary:hover{background:#f3f6ed}.button-ghost{color:#6b785d;padding-left:0;padding-right:0;font-size:10px}.button-ghost:hover{color:#27482f}.hero-visual{display:grid;place-items:center;position:relative;min-height:190px;z-index:1}.hero-code{width:270px;max-width:100%;border-radius:10px;background:#293e32;box-shadow:0 17px 30px #33452a1a;transform:rotate(-5deg);padding:13px 17px 17px;position:relative;border:1px solid #3e5041}.window-top{display:flex;align-items:center;gap:4px;border-bottom:1px solid #ffffff0c;padding-bottom:12px;margin-bottom:13px}.window-dot{width:5px;height:5px;border-radius:50%;background:#75836b}.window-dot:nth-child(2){background:#a2ae79}.window-dot:nth-child(3){background:#cadba3}.window-file{margin-left:auto;color:#80947e;font:8px var(--mono)}.hero-code pre{font:9px/2.1 var(--mono);color:#d5ddcd;white-space:pre;margin:0}.hero-code .line-number{color:#536a53;display:inline-block;width:21px}.token-keyword{color:#bdacd9}.token-string{color:#c8df9c}.token-comment{color:#6d846d}.token-number{color:#e4bd86}.floating-code{position:absolute;right:4px;bottom:9px;width:64px;height:64px;background:#c6e997;box-shadow:0 8px 16px #47663420;border:5px solid #edf3e4;border-radius:17px;display:grid;place-items:center;font:25px var(--mono);color:#4c6a36;transform:rotate(9deg)}.hero-spark{position:absolute;right:16px;top:2px;color:#7e9e59;font-size:34px;transform:rotate(15deg)}.hero-mini{position:absolute;top:13px;left:0;background:#f5f8eb;border:1px solid #dce8cd;border-radius:6px;font-size:8px;color:#728460;padding:8px 10px;transform:rotate(-9deg);display:flex;gap:6px;align-items:center;box-shadow:0 4px 5px #45663009}.hero-mini .icon{width:11px;height:11px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 256px;gap:25px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.section-title h2{font-family:var(--heading);font-size:16px;letter-spacing:-.5px;margin:0;font-weight:750}.section-title p{font-size:10px;color:#9a9f93;margin:6px 0 0}.section-title>a{color:#7b8870;font-size:10px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.section-title>a .icon{width:12px;height:12px}.filters{display:flex;gap:7px;margin-bottom:19px;flex-wrap:wrap}.filter{font-size:9px;padding:8px 12px;border-radius:6px;color:#979d90;border:1px solid #e5e9df;background:#fafbf8;font-weight:500}.filter:hover{background:#eaf0e1}.filter.active{background:#e8eddf;border-color:#dce5ce;color:#536a41}.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.course-card{border:1px solid #e4e8df;background:#fff;border-radius:11px;padding:19px 20px 17px;transition:border-color .15s,box-shadow .15s;min-width:0}.course-card:hover{border-color:#b9cba5;box-shadow:0 5px 18px #425a3010}.course-top{display:flex;align-items:center;gap:10px;margin-bottom:17px}.language-icon{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;flex-shrink:0;border-radius:10px;font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:-1px}.language-icon.yellow{background:#faf1cb;color:#9b7b16}.language-icon.blue{background:#e8effa;color:#557eac}.language-icon.coral{background:#f9e8df;color:#bb7d60}.language-icon.purple{background:#eee6fa;color:#9173b7;font-size:11px;letter-spacing:-.7px}.language-icon .icon{width:23px;height:23px}.lesson-count{color:#9a9f94;display:inline-flex;align-items:center;gap:5px;font-size:9px;margin-left:auto}.lesson-count .icon{height:12px;width:12px}.card-bookmark{width:22px;height:26px;display:grid;place-items:center;color:#b6bcb0;padding:0;margin-right:-5px;margin-left:2px}.card-bookmark .icon{width:14px;height:14px}.card-bookmark.saved{color:#61844e}.card-bookmark.saved svg{fill:#e0edcf}.course-card h3{font-family:var(--heading);font-size:16px;font-weight:750;letter-spacing:-.4px;margin:0 0 7px}.course-title{padding:0;text-align:left;font:inherit;letter-spacing:inherit}.course-title:hover{color:var(--green)}.course-description{color:#9a9f93;line-height:1.8;font-size:10px;margin:0 0 13px;min-height:36px;max-width:220px}.course-meta{display:flex;gap:14px;align-items:center;color:#949c88;font-size:8px;margin-bottom:18px}.course-meta>span{display:inline-flex;align-items:center;gap:5px}.course-meta .icon{width:11px;height:11px}.level-dot{height:5px;width:5px;border-radius:50%;background:#97ae76}.course-progress-label{font-size:8px;color:#a2a798;display:flex;justify-content:space-between;margin-bottom:6px}.progress-track{height:4px;background:#eff2e9;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:#90ad6b;border-radius:4px;transition:width .3s}.card-footer{margin-top:15px;padding-top:13px;border-top:1px solid #eff1eb;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:600;color:#6d7f59}.card-footer button{padding:0;font:inherit;color:inherit}.round-arrow{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#f4f7ef}.round-arrow .icon{width:12px;height:12px}.right-rail{padding-top:1px}.rail-panel{border:1px solid #e4e8dc;border-radius:11px;background:white;padding:20px;margin-bottom:18px}.rail-heading{display:flex;align-items:center;justify-content:space-between}.rail-heading h3{font-size:12px;font-family:var(--heading);font-weight:750;letter-spacing:-.3px;margin:0}.rail-heading .icon{height:15px;width:15px;color:#a0aa8f}.edit-goal{padding:0;color:#a6af98;display:flex}.goal-chart{position:relative;width:124px;height:124px;margin:17px auto 12px}.goal-chart svg{width:124px;height:124px;transform:rotate(-90deg)}.goal-track{fill:none;stroke:#f0f3e9;stroke-width:8}.goal-value{fill:none;stroke:#8fab69;stroke-width:8;stroke-linecap:round;stroke-dasharray:327;transition:stroke-dashoffset .4s}.goal-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.goal-center strong{font:750 28px var(--heading);letter-spacing:-1px;line-height:1.2}.goal-center small{font-size:9px;color:#a3aa97;margin-top:3px}.goal-description{text-align:center;font-size:9px;color:#949c88;line-height:1.8;margin:0 0 15px}.goal-description strong{color:#6b7a59;font-weight:500}.goal-footer{border-top:1px solid #eef1e6;padding-top:13px;display:flex;gap:6px;align-items:center;justify-content:center;font-size:9px;color:#8f9a7f}.goal-footer .icon{height:12px;width:12px;color:#c5a764}.week-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.streak-label{font-size:9px;display:flex;gap:5px;color:#9d946e;align-items:center}.streak-label .icon{width:12px;height:12px}.week-row{display:flex;justify-content:space-between;gap:4px}.week-day{text-align:center;font-size:8px;color:#a2a995}.day-circle{width:23px;height:23px;background:#f5f7f0;border:1px solid #edf0e6;border-radius:50%;margin-top:8px;display:grid;place-items:center;color:#c4ccb7}.day-circle .icon{height:10px;width:10px}.day-circle.today{border-color:#a7bc89;color:#85a064;background:#edf3e5}.day-circle.done{background:#8daa68;color:white;border-color:#8daa68}.week-note{font-size:8px;color:#a2aa96;text-align:center;margin:14px 0 0}.tip-panel{background:#f0f2e9;border:1px solid #e8ecdf;border-radius:11px;padding:19px 20px;position:relative}.tip-title{display:flex;gap:6px;align-items:center;font-size:8px;text-transform:uppercase;font-weight:650;letter-spacing:1px;color:#9aab80}.tip-title .icon{width:12px;height:12px}.tip-panel blockquote{font-family:var(--heading);font-weight:600;line-height:1.85;color:#728260;font-size:11px;margin:11px 0 7px}.tip-panel p{font-size:8px;color:#a0aa91;margin:0}.mini-banner{display:flex;gap:12px;align-items:center;margin-top:22px;border:1px dashed #dce4d0;border-radius:9px;padding:16px 19px;background:#f4f7ef}.mini-banner>.icon{height:23px;width:23px;color:#88a56b}.mini-banner h3{font-size:10px;margin:0 0 4px;color:#6e805c;font-weight:600}.mini-banner p{font-size:9px;color:#a2aa96;margin:0;line-height:1.7}.mini-banner a{margin-left:auto;color:#81946b;font-size:16px}.footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);max-width:1424px;margin:5px 43px 0;padding:19px 0;font-size:8px;color:#a5ad9b}.footer-brand{margin-left:7px;color:#98a588;font-family:var(--mono)}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-toolbar{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:7px}.catalog-search{display:flex;align-items:center;gap:10px;background:white;border:1px solid #e0e5d7;border-radius:7px;padding:8px 12px}.catalog-search .icon{width:14px;height:14px;color:#96a287}.catalog-search input{border:0;outline:0;background:none;width:170px;font-size:11px;color:#56694b}.catalog-intro{border-top:1px solid var(--line);margin-top:32px;padding:26px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.catalog-intro .icon{color:#83a665;width:21px;height:21px}.catalog-intro h3{font-size:12px;font-family:var(--heading);margin:12px 0 8px}.catalog-intro p{color:#919b87;font-size:11px;line-height:1.8;max-width:280px}.back-link{display:inline-flex;gap:7px;align-items:center;font-size:10px;color:#839173;margin-bottom:23px}.back-link .icon{width:13px;height:13px}.course-hero{background:#eaf0df;border:1px solid #dde7d1;border-radius:13px;display:flex;align-items:center;gap:24px;padding:30px;margin-bottom:27px}.course-hero>.language-icon{height:74px;width:74px;font-size:25px;border:4px solid white;box-shadow:0 3px 10px #48683310}.course-hero h1{font-family:var(--heading);font-size:29px;letter-spacing:-1px;margin:4px 0 8px}.course-hero p{color:#89977b;font-size:11px;margin:0;line-height:1.8}.course-hero .course-meta{margin:14px 0 0;font-size:10px}.course-hero .button{margin-left:auto;flex-shrink:0}.course-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:25px}.lesson-list{display:flex;flex-direction:column;gap:11px}.lesson-row{display:flex;align-items:center;gap:17px;padding:20px;border:1px solid #e2e8d8;background:white;border-radius:10px}.lesson-index{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;background:#f2f5eb;border:1px solid #e9eddf;border-radius:50%;font-size:12px;color:#8f9c7d}.lesson-index.complete{background:#e3efda;color:#5c8044}.lesson-row h3{font-family:var(--heading);font-size:13px;margin:0 0 6px;font-weight:700}.lesson-row p{font-size:9px;color:#9aa58b;margin:0}.lesson-row>a{margin-left:auto;color:#7e916a}.lesson-row>a .icon{width:16px;height:16px}.course-about h3{font-size:12px;margin:0 0 17px;font-family:var(--heading)}.outcome{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:#89977b;line-height:1.8;margin:12px 0}.outcome .icon{width:13px;height:13px;margin-top:3px;color:#83a562}.course-detail-progress{margin-top:24px}.course-detail-progress p{font-size:10px;color:#879b70}.lesson-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:16px;align-items:center}.lesson-top .back-link{margin:0}.lesson-actions{display:flex;gap:10px;align-items:center}.lesson-actions>span{font-size:9px;color:#929e85}.bookmark-lesson{display:flex;align-items:center;gap:6px;color:#8b9c77;font-size:10px}.bookmark-lesson.saved .icon{fill:#dfebce}.bookmark-lesson .icon{width:14px;height:14px}.lesson-steps{display:flex;gap:5px;margin-bottom:21px}.lesson-step{height:3px;border-radius:3px;flex:1;background:#e4eadb}.lesson-step.active{background:#8cab68}.lesson-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);gap:24px}.lesson-copy{background:white;border:1px solid #e2e7d9;border-radius:12px;padding:26px 25px;align-self:start}.lesson-copy .page-eyebrow{font-size:8px;line-height:1.8}.lesson-copy h1{font-family:var(--heading);font-size:25px;font-weight:750;letter-spacing:-.9px;margin:13px 0 20px;line-height:1.35}.lesson-copy p{font-size:12px;color:#819071;line-height:1.95;margin:0 0 16px}.lesson-copy code,.task-box code{font-family:var(--mono);font-size:.85em;background:#f0f3e9;color:#5d7748;padding:2px 4px;border-radius:4px;overflow-wrap:anywhere}.lesson-copy pre{background:#f5f7f0;border:1px solid #eaf0df;border-radius:7px;padding:16px;font-family:var(--mono);color:#697d55;font-size:10px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin:18px 0 24px}.task-box{background:#f0f5e7;border:1px solid #e2ebd4;border-radius:9px;padding:17px}.task-box h2{font-size:11px;font-weight:650;color:#5c7946;display:flex;align-items:center;gap:7px;margin:0 0 9px}.task-box h2 .icon{width:14px;height:14px}.task-box p{font-size:11px;margin:0;color:#7f916b}.hint-bar{display:flex;gap:15px;margin-top:17px}.hint-bar button{padding:0;font-size:10px;display:flex;align-items:center;gap:5px;color:#8b9a7a}.hint-bar .icon{width:13px;height:13px}.hint-text{font-size:11px!important;background:#faf7e9;padding:13px;border-radius:7px;color:#9a8c5c!important;margin:15px 0 0!important}.editor-panel{border:1px solid #35463a;background:#24342b;border-radius:11px;overflow:hidden}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:#2a3b30;height:47px;border-bottom:1px solid #ffffff09;gap:10px}.editor-file{display:flex;align-items:center;gap:7px;color:#c1ceba;font:10px var(--mono)}.editor-file .icon{width:13px;height:13px;color:#a0ba86}.editor-status{font-size:8px;color:#91a280;display:flex;align-items:center;gap:5px}.editor-status:before{content:'';height:4px;width:4px;border-radius:50%;background:#94b47a}.editor-tools{display:flex;align-items:center;gap:10px}.editor-tools .icon-button{color:#98aa88;width:22px;height:24px}.editor-tools .icon-button:hover{background:#ffffff0a}.editor-tools .icon{height:13px;width:13px}.code-editor{position:relative;height:290px;overflow:hidden;font:11px/1.9 var(--mono);tab-size:2}.line-numbers{position:absolute;inset:0 auto 0 0;width:45px;padding:19px 13px 50px 0;text-align:right;color:#5c745b;white-space:pre;overflow:hidden;user-select:none;font:inherit}.syntax-layer,.code-input{position:absolute;inset:0 0 0 45px;margin:0;padding:19px 17px 50px 0;border:0;border-radius:0;font:inherit;white-space:pre;tab-size:2;letter-spacing:0;word-spacing:0;overflow:auto;background:none}.syntax-layer{color:#ced8c5;pointer-events:none;scrollbar-width:none}.syntax-layer::-webkit-scrollbar{display:none}.code-input{color:transparent;caret-color:#d3e6b8;resize:none;width:calc(100% - 45px);height:100%;outline:none!important;z-index:1;-webkit-text-fill-color:transparent}.code-input::selection{background:#72955860}.editor-bottom{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-top:1px solid #ffffff0b;gap:8px}.editor-bottom>span{color:#788e6c;font-size:8px;line-height:1.8}.editor-bottom kbd{font-family:var(--font);border:1px solid #56704b;padding:2px 4px;border-radius:3px;font-size:8px}.run-button{background:#bfdc97;color:#344c2c;font-size:10px;padding:9px 15px}.run-button:hover{background:#cceba2}.output-panel{margin-top:15px;border:1px solid #e1e8d7;background:white;border-radius:10px;overflow:hidden}.output-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eaf0e1;padding:12px 16px;font-size:9px;color:#839474}.output-tabs{display:flex;gap:16px}.output-tabs button{padding:0;color:#9daa90;font-size:9px}.output-tabs button.active{color:#45633a;font-weight:650}.output-content{min-height:128px;max-height:290px;overflow:auto;padding:17px;font:10px/1.9 var(--mono);color:#788c66;white-space:pre-wrap;overflow-wrap:anywhere}.output-placeholder{font-family:var(--font);font-size:10px;color:#a0ad94;display:flex;align-items:center;gap:8px;padding:20px 0}.output-placeholder .icon{height:15px;width:15px}.output-error{color:#ae7059}.test-row{font:10px/1.7 var(--font);display:flex;gap:7px;align-items:center;margin:8px 0;color:#789563}.test-row .icon{width:13px;height:13px}.test-row.failed{color:#b98767}.test-summary{font:600 12px var(--heading);margin-bottom:11px;color:#567644}.test-summary.failed{color:#a5805a}.completion-banner{background:#eaf4df;border:1px solid #d7e8c3;border-radius:9px;padding:17px 20px;margin-top:15px;display:flex;gap:13px;align-items:center}.completion-banner>.icon{width:26px;height:26px;color:#7eab52}.completion-banner h3{font-size:11px;margin:0 0 4px;color:#577b37}.completion-banner p{font-size:9px;color:#91a47c;margin:0}.completion-banner .button{margin-left:auto;flex-shrink:0;font-size:9px}.html-preview{width:100%;height:210px;border:0;background:#fff}.sql-table{width:100%;border-collapse:collapse;font-size:10px;text-align:left;white-space:normal}.sql-table th,.sql-table td{padding:7px 9px;border-bottom:1px solid #eaf0e1}.sql-table th{color:#53713e;font-weight:500;background:#f5f8f0}.dataset{border-top:1px solid #e3ebd7;padding-top:17px;margin-top:20px}.dataset h3{font-size:11px;margin:0 0 8px}.dataset p{font-size:9px!important;line-height:1.8!important}.playground-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px}.playground-toolbar select{background:white;border:1px solid #dee6d2;border-radius:7px;padding:10px 35px 10px 13px;color:#6e855b;font-size:11px;min-width:170px}.playground-note{font-size:10px;color:#96a58a;display:flex;gap:6px;align-items:center}.playground-note .icon{width:13px;height:13px}.playground-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}.playground-layout .code-editor{height:410px}.playground-layout .output-panel{margin:0}.playground-layout .output-content{min-height:400px;max-height:550px}.playground-layout .html-preview{height:405px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}.stat-card{border:1px solid #e2e9d8;border-radius:10px;padding:22px;background:white}.stat-card .icon{color:#97ad81;width:18px;height:18px}.stat-card strong{display:block;font:750 29px var(--heading);letter-spacing:-1px;margin:15px 0 5px}.stat-card span{font-size:10px;color:#99a68a}.progress-course{display:flex;align-items:center;gap:17px;background:white;border:1px solid #e4e9da;border-radius:10px;padding:20px;margin:13px 0}.progress-course h3{font-size:12px;margin:0 0 7px;font-family:var(--heading)}.progress-course p{font-size:9px;color:#9aa58c;margin:0}.progress-course-body{flex:1}.progress-course .progress-track{width:100%;margin-top:12px}.progress-course>.button{margin-left:15px}.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.badge-card{border:1px solid #e3e9d9;border-radius:10px;padding:25px;text-align:center;background:#f2f5ed;color:#a4af98}.badge-card.unlocked{background:#f2f7e9;border-color:#d4e3bf;color:#6a8b4b}.badge-card>.icon{width:34px;height:34px;margin-bottom:11px}.badge-card h3{font-size:12px;font-family:var(--heading);margin:0 0 8px}.badge-card p{font-size:10px;line-height:1.8;margin:0}.badge-label{font-size:8px;text-transform:uppercase;letter-spacing:1px;display:inline-block;margin-top:14px}.empty-state{border:1px dashed #d9e3cc;border-radius:12px;text-align:center;padding:60px 20px;background:#f5f8f0;grid-column:1/-1}.empty-state>.icon{width:36px;height:36px;color:#9cb782}.empty-state h2{font-family:var(--heading);font-size:19px;margin:18px 0 12px;letter-spacing:-.6px}.empty-state p{color:#91a17f;font-size:12px;max-width:340px;margin:0 auto 22px;line-height:1.9}dialog{border:1px solid #e1e7d6;border-radius:14px;padding:0;max-width:520px;width:calc(100% - 36px);box-shadow:0 25px 90px #24382325;color:var(--ink);background:#fff}dialog::backdrop{background:#23332266;backdrop-filter:blur(3px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 25px;border-bottom:1px solid #e8eddf}.modal-head h2{font-family:var(--heading);font-size:17px;letter-spacing:-.5px;margin:0}.modal-body{padding:25px}.modal-body p{color:#8b9b7b;font-size:12px;line-height:1.9;margin:0 0 16px}.modal-body label{display:block;font-size:11px;color:#6d805c;margin:16px 0 8px}.modal-body input,.modal-body select{width:100%;border:1px solid #dce6d0;border-radius:7px;padding:11px;background:#f9fbf5;font-size:12px;color:#5b7446}.modal-body .button{margin-top:16px}.modal-footnote{font-size:10px!important;color:#a0ac93!important;margin-top:16px!important}.danger-button{color:#b7836e;font-size:10px;display:block;margin-top:24px;padding:0}.search-input-wrap{padding:16px 20px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #e7eddc}.search-input-wrap .icon{color:#8a9e78;width:18px;height:18px}.search-input-wrap input{border:0;outline:0;width:100%;font-size:13px;color:#61784d;padding:6px}.search-results{max-height:390px;overflow:auto;padding:8px}.search-result{display:flex;align-items:center;padding:12px;border-radius:7px;gap:13px}.search-result:hover{background:#f2f6e9}.search-result .language-icon{width:30px;height:30px;border-radius:7px;font-size:10px}.search-result strong{font-size:11px;font-weight:550;display:block}.search-result small{font-size:9px;color:#99a88a;display:block;margin-top:4px}.search-result>.icon{margin-left:auto;width:13px;height:13px;color:#a3b591}.search-empty{padding:25px 15px;color:#99a98a;font-size:12px;line-height:1.8}#toast{position:fixed;bottom:25px;left:calc(50% + 100px);transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;max-width:calc(100vw - 30px);background:#294b35;color:#e0efcf;border:1px solid #4f6d3e;border-radius:9px;padding:13px 20px;font-size:11px;box-shadow:0 8px 28px #2e482230;transition:transform .2s,opacity .2s}#toast.visible{opacity:1;transform:translate(-50%,0)}.mobile-backdrop{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1550px){.dashboard-grid{grid-template-columns:minmax(0,1fr) 290px;gap:30px}.hero{padding:40px;min-height:275px}.hero h2{font-size:39px}.hero p{font-size:12px}.hero-code{width:320px;padding:17px 23px}.hero-code pre{font-size:11px}.hero-visual{min-height:215px}.course-card{padding:24px}.course-description{font-size:11px;max-width:270px}.course-meta{font-size:10px}.course-card h3{font-size:18px}.course-progress-label{font-size:9px}.card-footer{font-size:11px}.rail-panel{padding:24px}.rail-heading h3{font-size:13px}.goal-description{font-size:10px}.tip-panel blockquote{font-size:12px}.page-heading h1{font-size:30px}.page-heading p{font-size:12px}.sidebar{width:250px}.app-shell{margin-left:250px}}
@media(max-width:1250px){.sidebar{width:213px;padding-left:16px;padding-right:16px}.app-shell{margin-left:213px}.brand{font-size:27px}.profile{width:calc(100% + 32px);margin-left:-16px;padding-left:16px;padding-right:16px}.topbar{padding:0 28px}main{padding:30px 28px}.dashboard-grid{grid-template-columns:minmax(0,1fr) 228px;gap:20px}.hero{padding:27px}.hero h2{font-size:28px}.hero-code{width:235px}.hero-code pre{font-size:8px}.hero-mini{left:-5px;font-size:7px}.hero-spark{right:0}.floating-code{right:-8px;bottom:2px;width:52px;height:52px;font-size:20px}.course-card{padding:17px}.course-top{gap:6px}.course-description{font-size:9px}.lesson-count{font-size:8px}.language-icon{width:35px;height:35px;font-size:13px}.rail-panel{padding:17px}.footer{margin:0 28px}.lesson-layout{grid-template-columns:minmax(240px,.8fr) minmax(320px,1.2fr);gap:18px}.lesson-copy{padding:21px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-detail-grid{grid-template-columns:minmax(0,1fr) 240px}}
@media(max-width:1050px){.dashboard-grid{grid-template-columns:1fr}.right-rail{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:6px}.rail-panel{margin:0}.tip-panel{display:none}.goal-chart{margin:15px auto;width:100px;height:100px}.goal-chart svg{width:100px;height:100px}.hero{grid-template-columns:1fr 40%;padding:25px}.hero h2{font-size:26px}.hero-code{width:215px;padding:12px}.hero-code pre{font-size:7.5px}.hero-mini{display:none}.hero-spark{font-size:25px}.search-trigger kbd{margin-left:15px}.topbar-actions{gap:15px}.hero p{max-width:260px}.course-detail-grid{grid-template-columns:1fr}.course-about{display:none}.course-hero{padding:25px;gap:18px}.course-hero h1{font-size:25px}.course-hero>.language-icon{width:55px;height:55px;font-size:18px}.lesson-layout{grid-template-columns:1fr}.lesson-copy{padding:24px}.lesson-copy h1{font-size:23px;margin:10px 0 15px}.lesson-copy pre{display:none}.lesson-copy p{font-size:11px}.lesson-copy .task-box p{font-size:11px}.code-editor{height:310px}.lesson-copy p{margin-bottom:12px}.playground-layout{grid-template-columns:1fr}.playground-layout .code-editor{height:330px}.playground-layout .output-content{min-height:180px}.stats-grid{grid-template-columns:repeat(2,1fr)}.badges-grid{grid-template-columns:1fr}.badge-card{padding:20px}.catalog-intro{gap:15px}.catalog-intro p{font-size:10px}.playground-note{font-size:9px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:235px;padding-top:27px}.sidebar.open{transform:translateX(0);box-shadow:10px 0 40px #28432120}.sidebar.open:before{content:'';position:fixed;top:0;left:235px;width:100vw;height:100vh;background:#2a3d272b;z-index:-1;pointer-events:none}.app-shell{margin-left:0}.mobile-menu{display:flex;flex-shrink:0;margin-left:-8px}.topbar{height:66px;padding:0 22px;gap:15px}.breadcrumb{margin-right:auto;gap:10px;font-size:10px}.topbar-actions{gap:9px}.search-trigger>span:not(.search-icon),.search-trigger kbd,.topbar-divider,.help-button{display:none}.search-trigger{padding:5px}.search-trigger .icon{width:18px;height:18px}.avatar-small{width:28px;height:28px}.page-heading h1{font-size:24px}.page-heading{margin-bottom:23px}.page-heading p{font-size:10px}.date-label{display:none}main{padding:27px 21px}.hero{grid-template-columns:1fr 40%;padding:24px;min-height:226px;margin-bottom:27px}.hero h2{font-size:25px}.hero p{font-size:9px}.hero-tag{font-size:8px}.hero-code{width:195px;padding:11px}.hero-code pre{font-size:7px}.hero-visual{margin-left:15px}.hero-spark{right:-9px;top:16px}.floating-code{right:-13px;width:48px;height:48px}.footer{margin:0 21px;font-size:8px}#toast{left:50%;width:max-content}.lesson-top{gap:10px}.lesson-actions>span{display:none}.playground-note{display:none}.catalog-search input{width:120px}.course-hero{flex-wrap:wrap;gap:16px}.course-hero .button{margin-left:0}.course-hero h1{font-size:22px}.catalog-intro{grid-template-columns:1fr;gap:12px}.catalog-intro>div{display:grid;grid-template-columns:25px 1fr;gap:0 12px}.catalog-intro .icon{grid-row:1/3;margin-top:11px}.catalog-intro p{margin:0;max-width:100%}.progress-course{padding:16px;gap:13px}.progress-course>.button{padding:9px 10px;font-size:9px;margin-left:0}.completion-banner{padding:15px;gap:10px}.completion-banner .button{padding:9px;font-size:8px}.completion-banner h3{font-size:10px}.lesson-copy{padding:23px}.editor-bottom>span{font-size:7px}.editor-bottom kbd{font-size:7px}}
@media(max-width:480px){main{padding:25px 18px}.topbar{padding:0 18px}.page-heading h1{font-size:24px}.hero{grid-template-columns:1fr;padding:27px;min-height:auto}.hero-visual{display:none}.hero h2{font-size:29px;max-width:300px}.hero p{font-size:10px;max-width:260px}.hero-tag{font-size:8px}.hero .button{font-size:10px}.course-grid{gap:12px}.course-card{padding:15px 13px}.course-top{flex-wrap:wrap;margin-bottom:14px;gap:5px}.language-icon{width:34px;height:34px;border-radius:8px}.lesson-count{font-size:7px;gap:3px}.lesson-count .icon{width:10px;height:10px}.course-card h3{font-size:15px}.course-description{font-size:9px;min-height:49px}.course-meta{gap:8px;font-size:7px}.course-meta .icon{width:9px;height:9px}.course-progress-label{font-size:7px}.card-footer{font-size:9px;padding-top:12px;margin-top:14px}.round-arrow{width:18px;height:18px}.card-bookmark{margin-left:-1px;width:13px;margin-right:0}.card-bookmark .icon{width:12px;height:12px}.right-rail{grid-template-columns:1fr 1fr;gap:12px}.rail-panel{padding:15px 12px}.rail-heading h3{font-size:10px}.goal-chart{width:95px;height:95px}.goal-chart svg{width:95px;height:95px}.goal-center strong{font-size:24px}.goal-center small{font-size:8px}.goal-description{font-size:8px}.goal-footer{font-size:7px;gap:4px}.week-heading{flex-wrap:wrap;gap:7px}.week-row{gap:2px}.week-day{font-size:7px}.day-circle{width:15px;height:15px;margin-top:6px}.day-circle .icon{width:8px;height:8px}.week-note{font-size:7px;line-height:1.8}.streak-label{font-size:8px}.week-row{margin-top:30px}.week-note{margin-top:17px}.tip-panel{display:none}.mini-banner{padding:14px 12px}.mini-banner h3{font-size:9px}.mini-banner p{font-size:8px}.mini-banner>.icon{height:18px;width:18px}.section-title h2{font-size:15px}.section-title>a{font-size:9px}.catalog-toolbar{flex-direction:column;gap:0}.catalog-search{width:100%;margin-bottom:16px;order:-1}.catalog-search input{width:100%}.filters{gap:5px}.filter{font-size:8px;padding:7px 10px}.catalog-grid{grid-template-columns:1fr}.catalog-grid .course-description{min-height:0;max-width:100%;font-size:11px}.catalog-grid .course-meta{font-size:9px}.catalog-grid .course-card{padding:23px}.catalog-grid .course-top{margin-bottom:15px}.catalog-grid .course-card h3{font-size:18px}.catalog-grid .lesson-count{font-size:9px}.catalog-grid .language-icon{width:42px;height:42px}.catalog-grid .card-bookmark{margin-left:8px}.course-hero{padding:23px}.course-hero h1{font-size:21px}.course-hero p{font-size:10px;max-width:210px}.course-hero>.language-icon{display:none}.course-hero .course-meta{font-size:9px}.lesson-row{padding:16px 13px;gap:12px}.lesson-row h3{font-size:11px}.lesson-row p{font-size:8px}.lesson-index{width:28px;height:28px;font-size:10px}.lesson-copy h1{font-size:23px}.lesson-copy{padding:22px 20px}.code-editor{height:310px;font-size:10px}.line-numbers{width:33px;padding-right:9px}.syntax-layer,.code-input{left:33px}.code-input{width:calc(100% - 33px)}.editor-bottom>span{max-width:145px}.editor-bottom kbd{display:none}.stats-grid{gap:12px}.stat-card{padding:19px}.stat-card strong{font-size:24px}.stat-card span{font-size:9px}.progress-course{flex-wrap:wrap}.progress-course>.button{width:100%;margin-top:3px}.progress-course .language-icon{align-self:start}.completion-banner{flex-wrap:wrap}.completion-banner .button{width:100%;margin-top:5px}.completion-banner h3{font-size:11px}.completion-banner p{font-size:9px}.footer{margin:0 18px}}
/* Keep secondary copy readable without losing the quiet visual hierarchy. */
.page-heading p,.course-description,.section-title p,.hero p{color:#717d65}
.course-description{font-size:12px;line-height:1.75}
.course-meta,.course-progress-label,.lesson-count{color:#77866b;font-size:10px}
.section-title p,.section-title>a,.filters .filter,.hero-tag{font-size:10px}
.goal-description,.goal-footer,.week-note,.goal-center small,.streak-label{color:#78876a}
.tip-panel p,.mini-banner p,.sidebar-note p,.profile small{color:#78896a}
.lesson-copy p,.task-box p{color:#647b50}
.lesson-copy p{font-size:13px}
.lesson-copy .task-box p{font-size:12px}
.lesson-row p,.progress-course p,.stat-card span,.catalog-intro p,.modal-body p{color:#738663}
.editor-bottom>span,.editor-status{color:#b2c39f}
.output-placeholder,.modal-footnote,.week-day{color:#768866}
.card-footer{font-size:11px}
@media(max-width:1250px){.course-description{font-size:11px}.course-meta,.course-progress-label,.lesson-count{font-size:9px}}
@media(max-width:480px){.course-description{font-size:10px;min-height:53px}.course-meta,.course-progress-label,.lesson-count{font-size:8px}.card-footer{font-size:10px}.section-title p,.section-title>a{font-size:9px}.filters .filter{font-size:9px}.catalog-grid .course-description{min-height:0}.lesson-copy p{font-size:12px}.lesson-copy .task-box p{font-size:11px}}
@media(max-width:760px){.sidebar:not(.open){visibility:hidden}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}