@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');:root{--code-bg:#0c0b14;--code-bg-2:#131226;--code-fg:#e9e6f7;--code-muted:#6b6688;--code-tag:var(--cyan);--code-attr:var(--violet-bright);--code-val:#8fe3b0;--radius-sm:9px;--radius-md:16px;--radius-lg:24px;--font-ui:'Vazirmatn',system-ui,sans-serif;--font-code:'JetBrains Mono',ui-monospace,Menlo,monospace;--edu-shadow-sm:0 1px 2px rgba(0,0,0,.16);--edu-shadow-md:0 20px 50px -20px rgba(0,0,0,.55);}code,pre,.mono{font-family:var(--font-code);direction:ltr;}::selection{background:var(--violet-dim);color:var(--text-1);}.edu-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}.edu-ambient::before,.edu-ambient::after{content:'';position:absolute;width:min(46vw,620px);height:min(46vw,620px);border-radius:50%;filter:blur(90px);opacity:.28;transition:opacity .5s ease,background .5s ease;}.edu-ambient::before{top:-160px;left:-120px;background:radial-gradient(circle,var(--violet) 0%,transparent 70%);}.edu-ambient::after{bottom:-220px;right:-160px;background:radial-gradient(circle,var(--cyan) 0%,transparent 72%);opacity:.16;}[data-theme="light"] .edu-ambient::before,[data-theme="light"] .edu-ambient::after{opacity:.14;}.edu-page{padding-top:104px;}.main-layout{display:grid;grid-template-columns:308px 1fr;align-items:start;max-width:1340px;margin:0 auto;padding:8px 28px 40px;gap:26px;}.sidebar{position:sticky;top:100px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:22px 18px 20px;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--edu-shadow-sm);transition:background .4s ease,border-color .4s ease;}.sidebar-title{display:flex;align-items:center;gap:9px;padding:0 6px 6px;margin-bottom:6px;font-weight:800;font-size:1.02rem;color:var(--text-1);}.sidebar-title svg{flex:0 0 auto;color:var(--violet-bright);}.progress-pill{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:2px 4px 16px;background:var(--card-bg);border:1px solid var(--glass-border);border-radius:999px;font-size:.78rem;color:var(--text-3);}.progress-pill .track{flex:1;height:6px;border-radius:999px;background:var(--violet-dim);overflow:hidden;}.progress-pill .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--violet-bright),var(--cyan));width:12.5%;box-shadow:0 0 10px rgba(144,131,247,.5);transition:width .5s cubic-bezier(.65,0,.35,1);}.progress-pill strong{color:var(--text-1);font-weight:700;}.sidebar nav{position:relative;display:flex;flex-direction:column;}.step{position:relative;display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:var(--radius-md);cursor:pointer;transition:background .2s ease;}.step::before{content:'';position:absolute;right:19px;top:calc(50%+14px);bottom:-11px;width:2px;background:var(--glass-border);}.step:last-child::before{display:none;}.step.done::before{background:linear-gradient(var(--cyan),var(--violet-bright));}.step .circle{position:relative;z-index:1;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--bg-void);border:2px solid var(--glass-border-strong);display:grid;place-items:center;transition:all .25s ease;}.step .circle::after{content:attr(data-index);font-family:var(--font-code);font-size:.66rem;font-weight:700;color:var(--text-3);}.step.done .circle{background:var(--violet-dim);border-color:var(--cyan);}.step.done .circle::after{content:'✓';color:var(--cyan);}.step.active .circle{background:linear-gradient(145deg,var(--violet-bright),var(--violet));border-color:var(--violet-bright);box-shadow:0 0 0 5px var(--violet-dim);}.step.active .circle::after{color:#fff;}.step .topic{flex:1;min-width:0;font-weight:600;font-size:.92rem;color:var(--text-2);transition:color .2s ease;}.step .topic span{display:block;}.step .topic small{display:block;font-weight:400;color:var(--text-3);font-size:.73rem;margin-top:1px;}.step:hover .topic{color:var(--text-1);}.step.active .topic{color:var(--violet-bright);font-weight:700;}.step:hover{background:var(--card-bg);}.step.active{background:var(--violet-dim);}.sidebar-note{margin-top:16px;padding:14px;border-radius:var(--radius-md);background:var(--card-bg);border:1px solid var(--glass-border);font-size:.79rem;color:var(--text-2);line-height:1.7;display:flex;gap:10px;align-items:flex-start;}.sidebar-note svg{flex:0 0 auto;margin-top:2px;color:var(--cyan);}.content{min-width:0;display:flex;flex-direction:column;gap:26px;}.lesson{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:36px 38px;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:var(--edu-shadow-md);animation:rise .45s cubic-bezier(.2,.7,.3,1) both;transition:background .4s ease,border-color .4s ease;}@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}.lesson-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-code);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--violet-bright);background:var(--violet-dim);border:1px solid var(--glass-border);padding:5px 12px;border-radius:999px;margin-bottom:16px;}.lesson-head{display:flex;align-items:flex-start;gap:18px;padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid var(--glass-border);}.lesson-icon{flex:0 0 auto;width:58px;height:58px;border-radius:18px;background:linear-gradient(155deg,var(--violet-dim),var(--bg-void-2));border:1px solid var(--glass-border);display:grid;place-items:center;box-shadow:var(--edu-shadow-sm);}.lesson-icon svg{width:28px;height:28px;stroke:var(--cyan);}.lesson-head h1{font-size:1.7rem;margin-bottom:5px;font-weight:900;color:var(--text-1);}.lesson-head p{margin:0;color:var(--text-2);font-size:.97rem;max-width:60ch;line-height:1.85;}.lesson-body h2{font-size:1.18rem;font-weight:800;display:flex;align-items:center;gap:9px;margin-top:32px;margin-bottom:.5em;color:var(--text-1);}.lesson-body h2::before{content:'';width:5px;height:20px;border-radius:3px;background:linear-gradient(var(--violet-bright),var(--cyan));display:inline-block;}.lesson-body>h2:first-child{margin-top:0;}.lesson-body p{color:var(--text-2);margin:0 0 12px;line-height:1.9;}.lesson-body ul{margin:0 0 14px;padding-inline-start:20px;color:var(--text-2);}.lesson-body li{margin-bottom:7px;line-height:1.85;}.lesson-body li b{color:var(--text-1);}.tag-chip{display:inline-block;font-family:var(--font-code);font-size:.82rem;font-weight:600;background:var(--bg-void-2);color:var(--cyan);border:1px solid var(--glass-border);padding:2px 8px;border-radius:6px;direction:ltr;}.code-card{margin:14px 0 22px;border-radius:var(--radius-md);overflow:hidden;background:var(--code-bg);box-shadow:var(--edu-shadow-sm);border:1px solid var(--glass-border-strong);}.code-card .code-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--code-bg-2);border-bottom:1px solid rgba(255,255,255,.06);}.code-bar .dots{display:flex;gap:6px;}.code-bar .dots span{width:10px;height:10px;border-radius:50%;}.code-bar .dots span:nth-child(1){background:#FF6058;}.code-bar .dots span:nth-child(2){background:#FFBD2E;}.code-bar .dots span:nth-child(3){background:#28C840;}.code-bar .filename{font-family:var(--font-code);font-size:.74rem;color:var(--code-muted);direction:ltr;}.code-card pre{margin:0;padding:16px 18px;overflow-x:auto;font-size:.87rem;line-height:1.8;color:var(--code-fg);direction:ltr;text-align:left;}.code-card code{font-family:var(--font-code);}.tk-tag{color:var(--code-tag);}.tk-attr{color:var(--code-attr);}.tk-val{color:var(--code-val);}.tk-punc{color:var(--code-muted);}.tk-cmt{color:var(--code-muted);font-style:italic;}.tk-text{color:var(--code-fg);}.practice{margin-top:36px;padding-top:28px;border-top:1px dashed var(--glass-border-strong);}.practice-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}.practice-head .pin{width:30px;height:30px;border-radius:10px;background:var(--violet-dim);border:1px solid var(--glass-border);display:grid;place-items:center;}.practice-head .pin svg{width:16px;height:16px;stroke:var(--cyan);}.practice-head h2{margin:0;font-size:1.18rem;}.practice-head h2::before{display:none;}.practice>p.task{color:var(--text-2);margin:0 0 18px;font-size:.95rem;line-height:1.85;}.editor-shell{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--glass-border-strong);box-shadow:var(--edu-shadow-md);}.editor-pane,.preview-pane{display:flex;flex-direction:column;min-width:0;}.editor-pane{background:var(--code-bg);}.editor-pane .pane-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--code-bg-2);border-bottom:1px solid rgba(255,255,255,.06);}.pane-bar .pane-label{display:flex;align-items:center;gap:8px;font-family:var(--font-code);font-size:.74rem;color:var(--code-muted);direction:ltr;}.pane-bar .pane-label svg{width:13px;height:13px;stroke:var(--code-muted);}.tool-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--code-muted);padding:5px 10px;border-radius:8px;font-size:.72rem;font-family:var(--font-ui);font-weight:600;transition:all .15s ease;}.tool-btn:hover{color:#fff;border-color:var(--violet-bright);background:var(--violet-dim);}.tool-btn svg{width:13px;height:13px;}.code-input{flex:1;width:100%;min-height:280px;resize:vertical;border:0;outline:0;background:transparent;color:var(--code-fg);font-family:var(--font-code);font-size:.87rem;line-height:1.8;padding:16px 18px;direction:ltr;text-align:left;tab-size:2;}.code-input::selection{background:rgba(144,131,247,.35);}.preview-pane{background:#fff;border-inline-start:1px solid var(--glass-border-strong);}.preview-pane .pane-bar{background:#f0eef8;border-bottom:1px solid #e3ddf5;}.preview-pane .pane-bar .pane-label{color:#7a728f;}.preview-pane .pane-bar .pane-label svg{stroke:#7a728f;}.preview-pane .address{flex:1;margin:0 12px;background:#fff;border:1px solid #e3ddf5;border-radius:999px;padding:4px 12px;font-family:var(--font-code);font-size:.7rem;color:#8a8299;direction:ltr;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.preview-frame{flex:1;width:100%;min-height:280px;border:0;background:#fff;}.editor-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;}.run-status{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-3);}.run-status .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px var(--violet-dim);}.editor-actions{display:flex;gap:10px;}.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:11px;border:1px solid transparent;font-weight:700;font-size:.86rem;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;}.btn svg{width:15px;height:15px;}.btn-primary{background:linear-gradient(120deg,var(--violet-bright),var(--cyan));color:#0c0b14;box-shadow:0 10px 26px -10px rgba(110,86,207,.6);}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px -10px rgba(95,227,208,.55);filter:brightness(1.05);}.btn-ghost{background:var(--card-bg);border-color:var(--glass-border);color:var(--text-2);}.btn-ghost:hover{border-color:var(--glass-border-strong);color:var(--text-1);}.hint-box{margin-top:16px;padding:14px 16px;border-radius:var(--radius-md);background:var(--card-bg);border:1px solid var(--glass-border);font-size:.85rem;color:var(--text-2);display:flex;gap:10px;align-items:flex-start;line-height:1.8;}.hint-box svg{flex:0 0 auto;margin-top:2px;width:16px;height:16px;stroke:var(--cyan);}.lesson-nav{display:flex;align-items:center;justify-content:space-between;margin-top:36px;padding-top:22px;border-top:1px solid var(--glass-border);}.nav-btn{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--card-bg);color:var(--text-1);min-width:150px;font-family:var(--font-ui);transition:all .2s ease;}.nav-btn svg{color:var(--text-3);transition:color .2s ease;}.nav-btn:hover{border-color:var(--violet-bright);background:var(--violet-dim);}.nav-btn:hover svg{color:var(--violet-bright);}.nav-btn small{display:block;color:var(--text-3);font-size:.7rem;}.nav-btn strong{display:block;font-size:.86rem;}.nav-btn.next{flex-direction:row-reverse;text-align:left;}.nav-btn svg{width:16px;height:16px;flex:0 0 auto;}.nav-btn.disabled{opacity:.3;pointer-events:none;}.site-footer{max-width:1340px;margin:10px auto 40px;padding:0 28px;color:var(--text-3);font-size:.82rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}@media (max-width:980px){.edu-page{padding-top:88px;}.main-layout{grid-template-columns:1fr;padding:8px 16px 32px;}.sidebar{position:static;}.lesson{padding:26px 20px;}.editor-shell{grid-template-columns:1fr;}.preview-pane{border-inline-start:0;border-top:1px solid var(--glass-border-strong);}}@media (max-width:560px){.lesson-head{flex-direction:column;}.lesson-nav{flex-direction:column;gap:10px;}.nav-btn{width:100%;}}.code-input::-webkit-scrollbar,.code-card pre::-webkit-scrollbar{height:8px;width:8px;}.code-input::-webkit-scrollbar-thumb,.code-card pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;}