@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap";:root{color:#f5f6ff;font-synthesis:none;text-rendering:optimizelegibility;background:#070914;font-family:Cairo,sans-serif}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:#070914;min-width:320px;margin:0}button,a{font:inherit;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.app{background:radial-gradient(at 80% 5%,#39257830,#0000 32%),radial-gradient(at 10% 35%,#123d6930,#0000 35%),#070914;min-height:100vh;overflow:hidden}.navbar{z-index:10;border-bottom:1px solid #ffffff10;justify-content:space-between;align-items:center;max-width:1440px;height:86px;margin:auto;padding:0 42px;display:flex;position:relative}.brand{letter-spacing:-1px;direction:ltr;align-items:center;gap:12px;font-size:25px;font-weight:900;display:flex}.brand-icon{color:#c4b5fd;background:linear-gradient(145deg,#8257ef30,#38bdf820);border:1px solid #a78bfa50;border-radius:14px;place-items:center;width:45px;height:45px;display:grid;box-shadow:0 0 25px #8b5cf620}.brand-accent{color:#a78bfa}.nav-links{color:#aeb5cc;align-items:center;gap:38px;font-size:14px;font-weight:600;display:flex}.nav-links a{transition:color .2s}.nav-links a:hover{color:#c4b5fd}.nav-button,.primary-button{color:#fff;background:linear-gradient(110deg,#7746ed,#5865e9);border-radius:12px;justify-content:center;align-items:center;gap:11px;padding:13px 23px;font-size:14px;font-weight:800;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 8px 25px #6945e52b}.nav-button:hover,.primary-button:hover{transform:translateY(-3px);box-shadow:0 12px 30px #6945e550}.mobile-menu{display:none}.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:80px;max-width:1440px;min-height:660px;margin:auto;padding:105px 55px 85px;display:grid}.hero-content{z-index:2;position:relative}.hero-label{color:#c4b5fd;background:#8b5cf61a;border:1px solid #a78bfa40;border-radius:50px;align-items:center;gap:9px;padding:10px 17px;font-size:13px;font-weight:700;display:inline-flex}.hero-label svg{color:#67e8f9}.hero h1{letter-spacing:-2px;max-width:700px;margin:26px 0 20px;font-size:clamp(42px,5vw,68px);font-weight:900;line-height:1.45}.gradient-text{background:linear-gradient(100deg,#c4b5fd 5%,#818cf8 48%,#67e8f9 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.hero-content>p{color:#a7b0ca;max-width:620px;margin:0;font-size:16px;line-height:2.3}.hero-actions{flex-wrap:wrap;align-items:center;gap:15px;margin-top:34px;display:flex}.secondary-button{color:#d8dcf0;border:1px solid #ffffff25;border-radius:12px;justify-content:center;align-items:center;padding:13px 23px;font-size:14px;font-weight:700;transition:all .2s;display:inline-flex}.secondary-button:hover{background:#ffffff0b;border-color:#a78bfa80}.hero-trust{color:#aab3ca;flex-wrap:wrap;gap:24px;margin-top:37px;font-size:12px;display:flex}.hero-trust span{align-items:center;gap:8px;display:flex}.hero-trust svg{color:#a78bfa}.hero-visual{place-items:center;min-height:430px;display:grid;position:relative}.visual-glow{filter:blur(110px);opacity:.19;background:#7746ed;border-radius:50%;width:380px;height:380px;position:absolute}.code-window{z-index:1;background:linear-gradient(145deg,#171c34,#0e1427);border:1px solid #a78bfa38;border-radius:19px;width:min(100%,500px);position:relative;overflow:hidden;transform:rotate(-2deg);box-shadow:0 35px 90px #0009,0 0 50px #7751e31a}.window-header{color:#9ca6c4;direction:ltr;border-bottom:1px solid #ffffff12;align-items:center;gap:13px;height:55px;padding:0 20px;font-size:12px;display:flex}.window-header>svg{color:#a78bfa;margin-left:auto}.window-dots{gap:6px;display:flex}.window-dots i{background:#fb7185;border-radius:50%;width:10px;height:10px}.window-dots i:nth-child(2){background:#fbbf24}.window-dots i:nth-child(3){background:#4ade80}.code-content{color:#e0e7ff;white-space:nowrap;padding:33px 25px;font-family:Consolas,monospace;font-size:13px;line-height:2.8}.line-number{color:#64708e;width:38px;display:inline-block}.code-purple{color:#c4b5fd}.code-blue{color:#7dd3fc}.code-green{color:#86efac}.code-orange{color:#fdba74}.terminal-output{color:#a5adc4;background:#080d1a80;border-top:1px solid #ffffff12;padding:20px 25px 23px;font-family:Consolas,monospace;font-size:12px}.terminal-output>span{color:#818cf8;letter-spacing:1px;font-size:10px}.terminal-output p{color:#86efac;font-size:14px}.success-line{color:#6ee7b7;font-size:11px}.floating-card{z-index:2;background:#171d34;border:1px solid #ffffff25;border-radius:14px;align-items:center;gap:10px;padding:14px 18px;font-size:12px;font-weight:700;display:flex;position:absolute;box-shadow:0 12px 35px #0008}.floating-card svg{color:#c4b5fd}.floating-one{top:45px;right:-10px}.floating-two{bottom:40px;left:-10px}.stats{background:linear-gradient(110deg,#151a2d,#111629);border:1px solid #ffffff17;border-radius:20px;grid-template-columns:repeat(4,1fr);max-width:1300px;margin:0 auto 110px;padding:32px 25px;display:grid;box-shadow:0 20px 60px #0003}.stats div{text-align:center;border-left:1px solid #ffffff15;flex-direction:column;gap:5px;display:flex}.stats div:last-child{border:0}.stats strong{color:#c4b5fd;font-size:34px;font-weight:900}.stats span{color:#9da8c3;font-size:13px}.courses-section,.features-section{max-width:1440px;margin:auto;padding:35px 45px 105px}.section-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px;display:flex}.section-label{color:#a78bfa;letter-spacing:2px;direction:ltr;font-size:11px;font-weight:900;display:inline-block}.section-heading h2{margin:10px 0;font-size:36px;font-weight:900}.section-heading p{color:#9da8c3;margin:0;font-size:14px;line-height:2}.course-count{color:#c4b5fd;background:#8b5cf61a;border:1px solid #8b5cf640;border-radius:10px;padding:10px 16px;font-size:12px}.courses-grid{grid-template-columns:repeat(3,1fr);gap:22px;display:grid}.course-card{background:linear-gradient(145deg,#171d32,#101526);border:1px solid #ffffff15;border-radius:18px;min-height:235px;padding:25px;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}.course-card:after{content:"";filter:blur(65px);opacity:.12;pointer-events:none;background:#8b5cf6;width:140px;height:140px;position:absolute;bottom:-90px;left:-75px}.course-card:hover{border-color:#a78bfa75;transform:translateY(-7px);box-shadow:0 18px 40px #0005}.course-top,.course-bottom{justify-content:space-between;align-items:center;display:flex}.course-icon{color:#c4b5fd;background:#a78bfa18;border:1px solid #a78bfa28;border-radius:15px;place-items:center;width:54px;height:54px;display:grid}.course-tag{color:#aab3ca;font-size:11px}.course-card h3{margin:20px 0 7px;font-size:20px;font-weight:800}.course-card>p{color:#9da8c3;min-height:52px;font-size:13px;line-height:2}.course-bottom{color:#aab3ca;margin-top:18px;font-size:11px}.course-bottom button{color:#c4b5fd;cursor:pointer;background:#ffffff08;border:1px solid #ffffff20;border-radius:11px;place-items:center;width:39px;height:39px;transition:all .2s;display:grid}.course-bottom button:hover{background:#8b5cf630;border-color:#a78bfa80;transform:translate(-3px)}.course-card.orange .course-icon{color:#fb923c;background:#fb923c18;border-color:#fb923c30}.course-card.blue .course-icon{color:#60a5fa;background:#60a5fa18;border-color:#60a5fa30}.course-card.yellow .course-icon{color:#facc15;background:#facc1518;border-color:#facc1530}.course-card.green .course-icon{color:#4ade80;background:#4ade8018;border-color:#4ade8030}.course-card.purple .course-icon{color:#c084fc;background:#c084fc18;border-color:#c084fc30}.course-card.pink .course-icon{color:#f472b6;background:#f472b618;border-color:#f472b630}.course-card.gold .course-icon{color:#fbbf24;background:#fbbf2418;border-color:#fbbf2430}.features-section{padding-top:25px}.features-grid{grid-template-columns:repeat(3,1fr);gap:22px;display:grid}.feature-card{background:#13192b;border:1px solid #ffffff15;border-radius:17px;padding:30px;transition:all .2s}.feature-card:hover{border-color:#a78bfa60;transform:translateY(-4px)}.feature-card>svg{color:#a78bfa;width:31px;height:31px}.feature-card h3{margin:17px 0 7px;font-size:18px}.feature-card p{color:#9da8c3;margin:0;font-size:13px;line-height:2}.cta-section{text-align:center;background:radial-gradient(at 50% 100%,#4f35a955,#0000 55%),linear-gradient(130deg,#171b32,#11172a);border:1px solid #a78bfa35;border-radius:24px;max-width:1300px;margin:0 auto 100px;padding:65px 25px}.cta-section>svg{color:#c4b5fd;width:32px;height:32px}.cta-section h2{margin:15px 0 8px;font-size:34px;font-weight:900}.cta-section p{color:#a5adc4;margin-bottom:27px;font-size:14px}.footer{text-align:center;color:#858da8;background:#080b15;border-top:1px solid #ffffff14;padding:35px 20px;font-size:12px}.footer .brand{color:#f4f5ff;justify-content:center;font-size:21px}.footer .brand-icon{width:38px;height:38px}.footer p{margin:13px 0 8px}@media (width<=1050px){.hero{gap:35px;padding-left:35px;padding-right:35px}.courses-grid{grid-template-columns:repeat(2,1fr)}.stats{margin-left:25px;margin-right:25px}}@media (width<=800px){.hero{grid-template-columns:1fr;gap:35px;padding-top:75px}.hero-content{text-align:center}.hero-content>p{margin:auto}.hero-actions,.hero-trust{justify-content:center}.hero-visual{min-height:350px}.features-grid{grid-template-columns:1fr}}@media (width<=600px){.navbar{height:72px;padding:0 17px}.brand{font-size:21px}.mobile-menu{cursor:pointer;color:#fff;background:0 0;border:0;display:block}.nav-button{display:none}.nav-links{z-index:20;background:#11172a;border-bottom:1px solid #ffffff20;flex-direction:column;gap:20px;padding:22px;display:none;position:absolute;top:72px;left:0;right:0}.nav-links.open{display:flex}.hero{padding:55px 20px 40px}.hero h1{font-size:37px}.hero-content>p{font-size:13px}.hero-trust{gap:13px;font-size:10px}.hero-visual{min-height:285px}.code-content{padding:20px 12px;font-size:10px}.floating-one{right:0}.floating-two{left:0}.stats{grid-template-columns:repeat(2,1fr);gap:22px 0;margin:0 15px 65px;padding:25px 10px}.stats div:nth-child(2){border:0}.stats strong{font-size:25px}.stats span{font-size:10px}.courses-section,.features-section{padding:25px 17px 65px}.section-heading{align-items:start}.section-heading h2{font-size:26px}.section-heading p{font-size:12px}.course-count{display:none}.courses-grid{grid-template-columns:1fr}.course-card{min-height:210px}.cta-section{margin:0 15px 60px;padding:40px 17px}.cta-section h2{font-size:25px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.app{isolation:isolate;position:relative}.code-background{pointer-events:none;z-index:0;opacity:1;width:100%;height:100%;position:fixed;inset:0}.app>header,.app>main,.app>footer{z-index:1;position:relative}.app:before{content:"";z-index:0;pointer-events:none;background-image:linear-gradient(#8c7bff0c 1px,#0000 1px),linear-gradient(90deg,#8c7bff0c 1px,#0000 1px);background-size:55px 55px;animation:35s linear infinite gridMovement;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 90%);mask-image:linear-gradient(#000,#0000 90%)}.app:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#7555f522 0%,#7555f508 40%,#0000 70%);border-radius:50%;width:500px;height:500px;animation:14s ease-in-out infinite alternate ambientMovement;position:fixed;top:10%;left:15%}@keyframes gridMovement{0%{background-position:0 0}to{background-position:55px 55px}}@keyframes ambientMovement{0%{transform:translate(0)}to{transform:translate(180px,100px)}}@media (prefers-reduced-motion:reduce){.app:before,.app:after{animation:none}}.tech-scene{perspective:1000px;isolation:isolate;place-items:center;width:100%;max-width:570px;height:480px;display:grid;position:relative}.scene-glow{filter:blur(100px);opacity:.28;background:#7955f4;border-radius:50%;width:300px;height:300px;position:absolute}.orbit-center{z-index:3;background:radial-gradient(circle at 35% 25%,#35316e,#11162e 65%);border:1px solid #b6a0ff80;border-radius:50%;place-items:center;width:190px;height:190px;animation:4s ease-in-out infinite centerFloat;display:grid;position:relative;box-shadow:0 0 35px #8b5cf655,0 0 100px #6366f133,inset 0 0 35px #a78bfa25}.center-inner{color:#c4b5fd;flex-direction:column;align-items:center;gap:9px;display:flex}.center-inner strong{color:#fff;font-size:22px;font-weight:900}.center-inner span{color:#8b9ab9;letter-spacing:1.5px;font-family:monospace;font-size:8px}.orbit-ring{pointer-events:none;border:1px solid #a78bfa40;border-radius:50%;position:absolute}.ring-one{border-color:#a78bfa90;width:285px;height:285px;transform:rotateX(65deg)rotate(-25deg)}.ring-two{border-color:#67e8f950;width:400px;height:400px;transform:rotateX(65deg)rotate(35deg)}.ring-three{border-color:#818cf850;width:490px;height:310px;transform:rotate(-30deg)}.orbit-tech{z-index:4;color:#dce4ff;background:linear-gradient(145deg,#1d2440,#101629);border:1px solid #ffffff25;border-radius:13px;align-items:center;gap:9px;padding:13px 17px;font-size:12px;font-weight:800;animation:5s ease-in-out infinite techFloat;display:flex;position:absolute;box-shadow:0 12px 30px #0007}.orbit-html{color:#fb923c;top:52px;right:75px}.orbit-css{color:#60a5fa;animation-delay:-.8s;top:155px;left:0}.orbit-js{color:#facc15;animation-delay:-1.6s;top:155px;right:0}.orbit-python{color:#4ade80;animation-delay:-2.4s;bottom:75px;left:45px}.orbit-react{color:#67e8f9;animation-delay:-3.2s;bottom:48px;right:55px}.orbit-sql{color:#c084fc;animation-delay:-1.2s;top:55px;left:65px}.scene-caption{color:#929dbb;letter-spacing:2px;align-items:center;gap:9px;font-family:monospace;font-size:9px;display:flex;position:absolute;bottom:0}.live-dot{background:#4ade80;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #4ade80}@keyframes centerFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes techFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (width<=800px){.tech-scene{transform-origin:50%;height:390px;margin:-20px 0;transform:scale(.85)}}@media (width<=480px){.tech-scene{width:145%;margin-top:-35px;margin-bottom:-35px;margin-right:-22.5%;transform:scale(.68)}}@media (prefers-reduced-motion:reduce){.orbit-center,.orbit-tech{animation:none}}.section-background{pointer-events:none;z-index:0;opacity:.65;width:100%;height:100%;position:fixed;inset:0}.page-content{z-index:1;position:relative}.project-credits{z-index:2;text-align:center;color:#9292a7;background:#0b0e19;border-top:1px solid #ffffff15;margin-top:25px;padding:22px 15px;font-size:13px;line-height:1.9;position:relative}.project-credits p{margin:3px 0}.project-credits strong{color:#c5a9ff;font-weight:800}@media (width<=600px){.navbar{flex-wrap:wrap;row-gap:0;height:auto;min-height:72px;padding:12px 17px}.brand{gap:9px;font-size:20px}.brand-icon{width:39px;height:39px}.mobile-menu{flex-shrink:0;place-items:center;width:42px;height:42px;display:grid}.nav-links{background:#11172a;border:1px solid #ffffff15;border-radius:13px;flex-direction:column;flex-basis:100%;align-items:center;gap:17px;width:100%;margin-top:12px;padding:18px 12px;display:none;position:static}.nav-links.open{display:flex}.nav-button{display:none}.hero{grid-template-columns:minmax(0,1fr);gap:30px;min-height:auto;padding:45px 18px 35px}.hero-content{text-align:center;width:100%;min-width:0}.hero-label{flex-wrap:wrap;justify-content:center;max-width:100%;padding:9px 13px;font-size:11px}.hero h1{letter-spacing:-1px;overflow-wrap:normal;width:100%;max-width:100%;margin:22px 0 15px;font-size:clamp(29px,8vw,37px);line-height:1.5}.gradient-text{display:inline}.hero-content>p{width:100%;max-width:100%;margin:0 auto;font-size:13px;line-height:2}.hero-actions{flex-direction:column;align-items:stretch;gap:12px;width:100%;margin-top:25px}.hero-actions a{width:100%;min-height:48px}.hero-trust{justify-content:center;gap:13px 17px;margin-top:25px;font-size:10px}.hero-visual{width:100%;min-width:0;min-height:300px;overflow:hidden}.tech-scene{transform-origin:50%;width:100%;max-width:100%;height:340px;margin:-20px auto;transform:scale(.68)}.orbit-center{width:165px;height:165px}.ring-one{width:250px;height:250px}.ring-two{width:350px;height:350px}.ring-three{width:420px;height:270px}.orbit-tech{gap:6px;padding:10px 12px;font-size:11px}.scene-caption{font-size:8px;bottom:5px}.code-window{width:100%;max-width:100%;transform:none}.code-content{max-width:100%;padding:18px 12px;font-size:10px;overflow-x:auto}.floating-one{right:3px}.floating-two{left:3px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0;margin:0 15px 60px;padding:23px 10px}.stats strong{font-size:25px}.stats span{font-size:10px}.courses-section,.features-section{padding:25px 17px 60px}.section-heading{flex-wrap:wrap;align-items:flex-start;gap:12px}.section-heading h2{font-size:25px;line-height:1.5}.section-heading p{font-size:12px}.courses-grid,.features-grid{grid-template-columns:minmax(0,1fr);gap:16px}.course-card{min-width:0;min-height:210px}.cta-section{margin:0 15px 55px;padding:35px 17px}.cta-section h2{font-size:24px;line-height:1.5}.app{width:100%;overflow-x:clip}}@media (width<=380px){.hero{padding-left:14px;padding-right:14px}.hero h1{font-size:29px;line-height:1.55}.hero-label{font-size:10px}.tech-scene{transform:scale(.6)}.hero-trust{gap:12px}.brand{font-size:18px}}@media (width>=601px) and (width<=800px){.navbar{padding-left:24px;padding-right:24px}.hero{gap:25px;padding:55px 25px 45px}.hero h1{font-size:42px;line-height:1.5}.tech-scene{width:100%;max-width:570px}}.brand-author{color:#e0d4ff;white-space:nowrap;text-shadow:0 0 12px #a78bfa55;direction:rtl;border-left:1px solid #a78bfa70;margin-left:2px;padding-left:12px;font-size:14px;font-weight:900}@media (width<=600px){.brand-author{color:#e9ddff;margin-left:0;padding-left:7px;font-size:11px;font-weight:900}}@media (width<=350px){.brand-author{padding-left:5px;font-size:9px}}.brand-author{color:#e9ddff;text-shadow:0 0 5px #c4b5fd,0 0 12px #a78bfa,0 0 22px #8b5cf6;font-size:14px;font-weight:900;animation:2s ease-in-out infinite alternate authorGlow}@keyframes authorGlow{0%{text-shadow:0 0 4px #c4b5fd,0 0 9px #a78bfa,0 0 15px #8b5cf6}to{text-shadow:0 0 7px #fff,0 0 16px #c4b5fd,0 0 28px #8b5cf6,0 0 38px #6366f1}}@media (width<=600px){.brand-author{font-size:11px}}@media (prefers-reduced-motion:reduce){.brand-author{text-shadow:0 0 12px #a78bfa;animation:none}}.html-course{--html-orange:#ff762e;--html-orange-bright:#ff9a52;--html-bg:#090b12;--html-panel:#121520e0;--html-line:#ffffff17;isolation:isolate;background:var(--html-bg);color:#f4f2ef;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.html-course *{box-sizing:border-box}.html-course a{color:inherit;text-decoration:none}.html-course button,.html-course textarea{font:inherit}.html-course button{cursor:pointer}.html-course button:disabled{cursor:not-allowed;opacity:.45}.html-background{z-index:-1;pointer-events:none;background:radial-gradient(at 77% 13%,#ff69282b,#0000 31%),radial-gradient(at 7% 44%,#70372321,#0000 34%),linear-gradient(#0a0b12 0%,#0d0e16 48%,#090b12 100%);position:absolute;inset:0;overflow:hidden}.html-grid-glow{opacity:.28;background-image:linear-gradient(#ffffff0e 1px,#0000 1px),linear-gradient(90deg,#ffffff0e 1px,#0000 1px);background-size:54px 54px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 86%);mask-image:linear-gradient(#000,#0000 86%)}.html-background>span{color:#ff8b4c47;text-shadow:0 0 16px #ff70304d,0 0 38px #ff703026;white-space:nowrap;font:600 clamp(17px,2.1vw,29px)/1 IBM Plex Mono,monospace;animation:13s ease-in-out infinite alternate html-code-drift;position:absolute}.html-background>span:first-of-type{top:8%;left:5%}.html-background>span:nth-of-type(2){animation-delay:-4s;top:19%;left:79%}.html-background>span:nth-of-type(3){animation-delay:-7s;top:32%;left:13%}.html-background>span:nth-of-type(4){animation-delay:-2s;top:43%;left:88%}.html-background>span:nth-of-type(5){animation-delay:-5s;top:57%;left:4%}.html-background>span:nth-of-type(6){animation-delay:-9s;top:70%;left:78%}.html-background>span:nth-of-type(7){animation-delay:-3s;top:83%;left:18%}.html-background>span:nth-of-type(8){animation-delay:-6s;top:92%;left:65%}.html-background>span:nth-of-type(9){animation-delay:-8s;top:13%;left:46%}.html-background>span:nth-of-type(10){animation-delay:-1s;top:27%;left:61%}.html-background>span:nth-of-type(11){animation-delay:-6s;top:48%;left:40%}.html-background>span:nth-of-type(12){animation-delay:-10s;top:64%;left:54%}.html-background>span:nth-of-type(13){animation-delay:-4s;top:76%;left:91%}.html-background>span:nth-of-type(14){animation-delay:-7s;top:88%;left:42%}.html-background>span:nth-of-type(15){animation-delay:-11s;top:37%;left:3%}@keyframes html-code-drift{0%{opacity:.45;transform:translateY(-15px)rotate(-5deg)}to{opacity:1;transform:translate(18px,20px)rotate(5deg)}}.html-orbit{border:1px solid #ff854638;border-radius:50%;width:460px;height:180px;position:absolute;top:35%;left:68%;transform:translate(-50%,-50%)rotate(-28deg);box-shadow:0 0 28px #ff703012,inset 0 0 24px #ff70300a}.orbit-two{border-color:#ffb17524;width:570px;height:240px;transform:translate(-50%,-50%)rotate(35deg)}.orbit-three{border-color:#ff85461c;width:680px;height:310px;transform:translate(-50%,-50%)rotate(-58deg)}.html-topbar{z-index:2;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;width:min(1240px,100% - 48px);height:82px;margin:auto;display:flex;position:relative}.html-logo{letter-spacing:-1px;align-items:center;gap:10px;font:700 21px IBM Plex Mono,monospace;display:inline-flex}.html-logo-icon{color:var(--html-orange);text-shadow:0 0 18px #ff762e8c;font-size:25px}.html-topbar nav{align-items:center;gap:29px;display:flex}.html-topbar nav a{color:#a9a9b4;font-size:14px;transition:color .2s}.html-topbar nav a:hover{color:var(--html-orange-bright)}.html-language{color:#777986;letter-spacing:1.3px;font:500 10px IBM Plex Mono,monospace}.html-hero{grid-template-columns:1fr 1fr;align-items:center;gap:50px;width:min(1240px,100% - 48px);min-height:610px;margin:auto;padding:65px 0 80px;display:grid}.html-tag,.html-section-heading>span,.html-course-eyebrow{color:var(--html-orange-bright);letter-spacing:1.5px;font:600 11px IBM Plex Mono,monospace}.html-tag{background:#ff762e12;border:1px solid #ff85464d;border-radius:30px;align-items:center;gap:10px;padding:10px 15px;display:inline-flex}.html-live-dot{background:#ff8b48;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #ff762e}.html-hero h1{letter-spacing:-1.5px;margin:25px 0 18px;font-size:clamp(42px,5.2vw,68px);font-weight:800;line-height:1.22}.html-hero h1 strong{color:var(--html-orange);text-shadow:0 0 35px #ff762e33}.html-hero-content>p{color:#a6a6b1;max-width:560px;margin:0;font-size:17px;line-height:2}.html-hero-actions{flex-wrap:wrap;gap:13px;margin-top:30px;display:flex}.html-primary-btn,.html-secondary-btn,.html-complete-btn,.html-next-btn,.html-run-btn,.html-reset-btn{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;min-height:46px;padding:0 22px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.html-primary-btn,.html-run-btn{color:#1a100b;background:linear-gradient(120deg,#ff9a52,#ff6c2d);box-shadow:0 8px 28px #ff692830}.html-primary-btn:hover,.html-run-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px #ff69284d}.html-secondary-btn,.html-reset-btn{color:#e8e6e4;background:#ffffff09;border-color:#ffffff24}.html-secondary-btn:hover,.html-reset-btn:hover{border-color:#ff8b488c}.html-hero-meta{color:#888995;gap:24px;margin-top:35px;font-size:13px;display:flex}.html-hero-meta span:before{content:"✦";color:var(--html-orange);margin-left:8px}.html-visual{place-items:center;min-height:400px;display:grid;position:relative}.html-code-window{z-index:1;background:#0d0f17f0;border:1px solid #ff975e4d;border-radius:16px;width:min(100%,490px);position:relative;overflow:hidden;transform:perspective(1000px)rotateY(-5deg)rotateX(2deg);box-shadow:0 25px 90px #00000073,0 0 55px #ff6f301f}.html-window-bar{border-bottom:1px solid var(--html-line);background:#ffffff0b;align-items:center;gap:7px;height:47px;padding:0 17px;display:flex}.html-window-bar>span{background:#ff7950;border-radius:50%;width:9px;height:9px}.html-window-bar>span:nth-child(2){background:#ffc45d}.html-window-bar>span:nth-child(3){background:#67d49b}.html-window-bar small{color:#777986;margin-right:auto;font:11px IBM Plex Mono,monospace}.html-code-window pre{color:#f1b17e;text-align:left;white-space:pre-wrap;direction:ltr;margin:0;padding:27px 24px 25px;font:13px/2 IBM Plex Mono,monospace}.html-window-status{border-top:1px solid var(--html-line);color:#818391;letter-spacing:1px;padding:13px 18px;font:9px IBM Plex Mono,monospace}.html-window-status>span{background:#5ed69a;border-radius:50%;width:6px;height:6px;margin-right:7px;display:inline-block}.html-window-status b{float:right;color:var(--html-orange)}.html-visual-ring{border:1px solid #ff803f2e;border-radius:50%;width:450px;height:450px;animation:24s linear infinite html-ring-spin;position:absolute}.html-visual-ring:before,.html-visual-ring:after{content:"";background:#ff8949;border-radius:50%;width:11px;height:11px;position:absolute;box-shadow:0 0 22px 6px #ff762e73}.html-visual-ring:before{top:15%;left:13%}.html-visual-ring:after{bottom:20%;right:9%}.ring-b{border-color:#ffbe8c26;width:530px;height:250px;animation-direction:reverse;transform:rotate(55deg)}@keyframes html-ring-spin{to{rotate:360deg}}.html-floating-tag{z-index:2;width:75px;height:75px;color:var(--html-orange);background:#17151a;border:1px solid #ff945373;border-radius:20px;place-items:center;font:700 25px IBM Plex Mono,monospace;display:grid;position:absolute;top:1%;right:3%;transform:rotate(9deg);box-shadow:0 0 35px #ff762e2e}.html-floating-chip{z-index:2;color:#ffad79;background:#171720;border:1px solid #ff965b52;border-radius:8px;padding:9px 13px;font:10px IBM Plex Mono,monospace;position:absolute;box-shadow:0 8px 25px #0008}.chip-one{bottom:8%;left:3%}.chip-two{top:17%;left:0}.html-stats{border:1px solid var(--html-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff06;border-radius:14px;grid-template-columns:repeat(4,1fr);width:min(1100px,100% - 48px);margin:0 auto 80px;padding:25px 15px;display:grid}.html-stats>div{border-left:1px solid var(--html-line);flex-direction:column;align-items:center;gap:5px;display:flex}.html-stats>div:last-child{border-left:0}.html-stats strong{color:var(--html-orange-bright);font:700 27px IBM Plex Mono,monospace}.html-stats span{color:#92939e;font-size:13px}.html-section{width:min(1180px,100% - 48px);margin:0 auto;padding:65px 0;scroll-margin-top:25px}.html-section-heading{text-align:center;margin-bottom:35px}.html-section-heading h2{margin:12px 0 8px;font-size:clamp(27px,3.5vw,39px);font-weight:800}.html-section-heading p{color:#92939e;margin:0;font-size:15px}.html-level-grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.html-level-card{border:1px solid var(--html-line);background:linear-gradient(145deg,#1b1b25eb,#0f1119e6);border-radius:14px;padding:25px;transition:transform .25s,border-color .25s}.html-level-card:hover{border-color:#ff854666;transform:translateY(-5px)}.html-level-top{justify-content:space-between;align-items:center;display:flex}.html-level-top>span{color:var(--html-orange);font:700 32px IBM Plex Mono,monospace}.html-level-top b{color:#8f909c;letter-spacing:1px;font:10px IBM Plex Mono,monospace}.html-level-card h3{margin:15px 0 7px;font-size:21px}.html-level-card>p,.html-challenge p{color:#9b9ba7;font-size:14px;line-height:1.8}.html-topic-list{flex-wrap:wrap;gap:7px;margin:18px 0;display:flex}.html-topic-list span{color:#c2c0c0;border:1px solid #ffffff17;border-radius:6px;padding:6px 9px;font-size:11px}.html-challenge{border-right:2px solid var(--html-orange);background:#ff762e0e;padding:13px}.html-challenge b{color:#ffad79;font-size:13px}.html-challenge p{margin:5px 0 0}.html-project{color:#e6b18d;margin-top:17px;font-size:13px}.html-learning-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}.html-lesson-list,.html-lesson-content{border:1px solid var(--html-line);background:var(--html-panel);border-radius:14px;overflow:hidden}.html-lesson-list{padding:8px}.html-lesson-item{color:#eae8e7;text-align:right;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:12px;width:100%;padding:14px 12px;transition:all .2s;display:flex}.html-lesson-item:hover{background:#ffffff0a}.html-lesson-item.active{background:#ff762e1a;border-color:#ff824247}.html-lesson-number{color:#aaaab4;background:#ffffff0e;border-radius:8px;flex:0 0 34px;place-items:center;height:34px;font:12px IBM Plex Mono,monospace;display:grid}.html-lesson-item.active .html-lesson-number{background:var(--html-orange);color:#21120a}.html-lesson-info{flex-direction:column;gap:4px;min-width:0;display:flex}.html-lesson-info strong{font-size:13px}.html-lesson-info small{color:#777986;font-size:11px}.html-lesson-arrow{color:#777986;margin-right:auto}.html-lesson-content{padding:29px}.html-lesson-kicker{color:var(--html-orange-bright);letter-spacing:1px;justify-content:space-between;font:10px IBM Plex Mono,monospace;display:flex}.html-lesson-kicker span:last-child{color:#858693}.html-lesson-content h3{margin:15px 0;font-size:27px}.html-explanation{color:#b2b1ba;font-size:15px;line-height:2}.html-lesson-content h4{margin:25px 0 10px;font-size:16px}.html-points{grid-template-columns:1fr 1fr;gap:10px 20px;padding:0;list-style:none;display:grid}.html-points li{color:#b9b8c0;font-size:13px;line-height:1.8}.html-points li:before{content:"↗";color:var(--html-orange);margin-left:9px}.html-example{background:#0b0d14;border:1px solid #ffffff17;border-radius:10px;margin-top:23px;overflow:hidden}.html-example-heading,.html-editor-heading,.html-preview-heading{border-bottom:1px solid var(--html-line);color:#e9e5e2;justify-content:space-between;padding:12px 16px;font-size:12px;display:flex}.html-example-heading span:last-child,.html-editor-heading span:last-child,.html-preview-heading span:last-child{color:var(--html-orange);font:10px IBM Plex Mono,monospace}.html-example pre{text-align:left;color:#f1b17e;white-space:pre-wrap;direction:ltr;margin:0;padding:18px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.html-task{background:#ff762e12;border:1px solid #ff762e29;border-radius:9px;margin-top:18px;padding:15px}.html-task b{color:#ffad79;font-size:13px}.html-task p{color:#c2bfc0;margin:5px 0 0;font-size:13px;line-height:1.8}.html-lesson-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.html-complete-btn{color:#17100c;background:#ff9a52}.html-next-btn{color:#eee;border-color:var(--html-line);background:#252631}.html-lab{grid-template-columns:1fr 1fr;gap:16px;display:grid}.html-editor,.html-preview{border:1px solid var(--html-line);background:#11131c;border-radius:13px;min-width:0;overflow:hidden}.html-editor-heading,.html-preview-heading{background:#ffffff09}.html-editor textarea{resize:vertical;color:#ffc08e;text-align:left;tab-size:2;direction:ltr;background:#0b0d14;border:0;outline:0;width:100%;min-height:340px;padding:20px;font:13px/1.8 IBM Plex Mono,monospace;display:block}.html-editor-actions{border-top:1px solid var(--html-line);gap:9px;padding:13px;display:flex}.html-run-btn,.html-reset-btn{min-height:39px;font-size:12px}.html-preview iframe{background:#fff;border:0;width:100%;height:410px;display:block}.html-preview-empty{color:#9696a2;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:410px;display:flex}.html-preview-empty>span{color:var(--html-orange);text-shadow:0 0 25px #ff762e66;margin-bottom:14px;font:700 43px IBM Plex Mono,monospace}.html-preview-empty b{color:#e4e1df;font-size:16px}.html-preview-empty p{font-size:13px}.html-lab-note{color:#777986;text-align:center;font-size:12px}.html-quiz-start,.html-quiz-box{border:1px solid var(--html-line);background:var(--html-panel);border-radius:14px;max-width:800px;margin:auto;padding:30px}.html-quiz-start{text-align:center}.html-quiz-icon{width:58px;height:58px;color:var(--html-orange);background:#ff762e14;border:1px solid #ff854666;border-radius:16px;place-items:center;margin:0 auto 15px;font:700 30px IBM Plex Mono,monospace;display:grid}.html-quiz-start h3{margin:0 0 7px;font-size:21px}.html-quiz-start p{color:#9999a5;margin:0 0 20px;font-size:14px}.html-question{border-bottom:1px solid var(--html-line);padding:18px 0}.html-question h3{align-items:center;gap:12px;margin:0 0 14px;font-size:16px;display:flex}.html-question h3 span{color:var(--html-orange);font:12px IBM Plex Mono,monospace}.html-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.html-options button{color:#c4c2c8;text-align:right;background:#ffffff06;border:1px solid #ffffff1a;border-radius:8px;padding:11px 13px;font-size:13px}.html-options button.selected{border-color:var(--html-orange);color:#ffbd91;background:#ff762e1a}.html-options button.correct{color:#7ce0b0;background:#3ebd831a;border-color:#3ebd83}.html-quiz-box>.html-primary-btn{margin-top:20px}.html-quiz-result{text-align:center;background:#ff762e12;border-radius:10px;margin-top:20px;padding:20px}.html-quiz-result>strong{color:var(--html-orange);font:700 34px IBM Plex Mono,monospace}.html-quiz-result h3{margin-bottom:5px}.html-quiz-result p{color:#a5a4ad;font-size:13px}.html-full-course{background:radial-gradient(at 10%,#ff762e21,#0000 50%),#15141c;border:1px solid #ff854640;border-radius:16px;align-items:center;gap:25px;padding:35px;display:flex}.html-course-symbol{color:#1c1009;background:linear-gradient(135deg,#ff9a52,#ff6429);border-radius:20px;flex:0 0 76px;place-items:center;height:76px;font-size:25px;display:grid;box-shadow:0 0 30px #ff762e33}.html-full-course h2{margin:9px 0;font-size:24px}.html-full-course p{color:#a5a4ae;margin:0 0 18px;font-size:14px;line-height:1.8}.html-footer{border-top:1px solid var(--html-line);text-align:center;background:#00000026;margin-top:65px;padding:38px 20px}.html-footer strong{color:var(--html-orange);font:700 21px IBM Plex Mono,monospace}.html-footer p{color:#a2a1ac;margin:8px 0 15px;font-size:13px}.html-footer span{color:#777986;margin-top:5px;font-size:11px;display:block}@media (width<=900px){.html-hero{gap:25px}.html-topbar nav{gap:15px}.html-language{display:none}.html-learning-layout{grid-template-columns:260px 1fr}.html-lesson-content{padding:22px}}@media (width<=700px){.html-topbar{flex-wrap:wrap;gap:12px;width:calc(100% - 30px);height:auto;min-height:70px;padding:14px 0}.html-topbar nav{order:2;justify-content:space-between;gap:8px;width:100%;overflow-x:auto}.html-topbar nav a{white-space:nowrap;font-size:12px}.html-hero{grid-template-columns:1fr;gap:35px;width:calc(100% - 34px);padding:55px 0 45px}.html-hero h1{font-size:46px}.html-hero-content>p{font-size:15px}.html-visual{min-height:330px}.html-code-window{width:94%}.html-code-window pre{padding:20px 14px;font-size:10px}.html-visual-ring{width:330px;height:330px}.ring-b{width:390px;height:190px}.html-stats{grid-template-columns:1fr 1fr;row-gap:22px;width:calc(100% - 30px);margin-bottom:45px}.html-stats>div:nth-child(2){border-left:0}.html-stats>div:nth-child(3),.html-stats>div:nth-child(4){border-top:1px solid var(--html-line);padding-top:15px}.html-section{width:calc(100% - 30px);padding:45px 0}.html-level-grid,.html-learning-layout{grid-template-columns:1fr}.html-lesson-list{grid-template-columns:1fr 1fr;display:grid}.html-lesson-item{gap:7px;padding:10px 7px}.html-lesson-info strong{font-size:11px}.html-lesson-number{flex-basis:29px;height:29px;font-size:10px}.html-lesson-content{padding:19px}.html-lesson-content h3{font-size:23px}.html-points{grid-template-columns:1fr;gap:5px}.html-lab{grid-template-columns:1fr}.html-editor textarea{min-height:270px}.html-preview iframe,.html-preview-empty{height:330px;min-height:330px}.html-options{grid-template-columns:1fr}.html-quiz-start,.html-quiz-box{padding:20px}.html-full-course{flex-direction:column;align-items:flex-start;padding:24px}.html-full-course h2{font-size:21px}.html-background>span{opacity:.7}}@media (prefers-reduced-motion:reduce){.html-course *,.html-course :before,.html-course :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.css-course{--css-purple:#8875ff;--css-purple-bright:#a99aff;--css-cyan:#50d9d2;--css-bg:#0b0a16;--css-panel:#161427e6;--css-line:#ffffff17;isolation:isolate;background:var(--css-bg);color:#f4f2ff;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.css-course *{box-sizing:border-box}.css-course a{color:inherit;text-decoration:none}.css-course button,.css-course textarea{font:inherit}.css-course button{cursor:pointer}.css-course button:disabled{cursor:not-allowed;opacity:.45}.css-background{z-index:-1;pointer-events:none;background:radial-gradient(at 75% 12%,#6f53ff38,#0000 32%),radial-gradient(at 8% 45%,#30bebe21,#0000 34%),linear-gradient(#0b0a16 0%,#100e20 48%,#0b0a16 100%);position:absolute;inset:0;overflow:hidden}.css-grid-glow{opacity:.28;background-image:linear-gradient(#9785ff14 1px,#0000 1px),linear-gradient(90deg,#9785ff14 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 90%);mask-image:linear-gradient(#000,#0000 90%)}.css-blob{filter:blur(100px);opacity:.32;border-radius:50%;width:430px;height:430px;animation:7s ease-in-out infinite alternate css-blob-move;position:absolute}.blob-a{background:#7655ff;top:7%;right:-170px}.blob-b{background:#28c8c0;animation-delay:-6s;top:42%;left:-180px}@keyframes css-blob-move{0%{transform:translate(0)scale(.85)}to{transform:translate(-70px,90px)scale(1.2)}}.css-float-token{color:#a495ff94;text-shadow:0 0 20px #8975ff4d;white-space:nowrap;font:600 clamp(15px,2vw,27px)/1 IBM Plex Mono,monospace;animation:6s ease-in-out infinite alternate css-token-float;position:absolute}.token-one{top:8%;left:5%}.token-two{color:#50d9d266;animation-delay:-4s;top:20%;right:6%}.token-three{animation-delay:-7s;top:33%;left:13%}.token-four{color:#50d9d266;animation-delay:-2s;top:45%;right:9%}.token-five{animation-delay:-5s;top:58%;left:4%}.token-six{animation-delay:-9s;top:70%;right:7%}.token-seven{color:#50d9d266;animation-delay:-3s;top:83%;left:18%}.token-eight{animation-delay:-6s;top:92%;right:25%}@keyframes css-token-float{0%{opacity:.45;transform:translateY(-17px)rotate(-5deg)}to{opacity:1;transform:translateY(22px)rotate(5deg)}}.css-shape{border:1px solid #9785ff6b;position:absolute;box-shadow:0 0 45px #8975ff33}.shape-one{border-radius:35%;width:220px;height:220px;animation:10s linear infinite css-shape-rotate;top:12%;left:50%;transform:rotate(35deg)}.shape-two{border-color:#50d9d233;border-radius:50%;width:300px;height:300px;animation:4s ease-in-out infinite alternate css-shape-pulse;top:48%;right:-140px}.shape-three{border-radius:25%;width:180px;height:180px;animation:13s linear infinite reverse css-shape-rotate;top:76%;left:22%;transform:rotate(45deg)}@keyframes css-shape-rotate{to{rotate:360deg}}@keyframes css-shape-pulse{to{opacity:.25;transform:scale(1.35)}}.css-topbar{z-index:2;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;width:min(1240px,100% - 48px);height:82px;margin:auto;display:flex;position:relative}.css-logo{letter-spacing:-1px;align-items:center;gap:10px;font:700 21px IBM Plex Mono,monospace;display:inline-flex}.css-logo-icon{color:var(--css-purple-bright);text-shadow:0 0 18px #8975ffb3;font-size:27px}.css-topbar nav{align-items:center;gap:29px;display:flex}.css-topbar nav a{color:#aaa7bd;font-size:14px;transition:color .2s}.css-topbar nav a:hover{color:var(--css-purple-bright)}.css-language{color:#858196;letter-spacing:1.3px;font:500 10px IBM Plex Mono,monospace}.css-hero{grid-template-columns:1fr 1fr;align-items:center;gap:50px;width:min(1240px,100% - 48px);min-height:610px;margin:auto;padding:65px 0 80px;display:grid}.css-tag,.css-section-heading>span,.css-course-eyebrow{color:var(--css-purple-bright);letter-spacing:1.5px;font:600 11px IBM Plex Mono,monospace}.css-tag{background:#8975ff17;border:1px solid #8975ff59;border-radius:30px;align-items:center;gap:10px;padding:10px 15px;display:inline-flex}.css-live-dot{background:#8f7dff;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #8875ff}.css-hero h1{letter-spacing:-1.5px;margin:25px 0 18px;font-size:clamp(42px,5.2vw,68px);font-weight:800;line-height:1.22}.css-hero h1 strong{color:var(--css-purple-bright);text-shadow:0 0 35px #8975ff4d}.css-hero-content>p{color:#aaa7bb;max-width:560px;margin:0;font-size:17px;line-height:2}.css-hero-actions{flex-wrap:wrap;gap:13px;margin-top:30px;display:flex}.css-primary-btn,.css-secondary-btn,.css-complete-btn,.css-next-btn,.css-run-btn,.css-reset-btn{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;min-height:46px;padding:0 22px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.css-primary-btn,.css-run-btn{color:#151020;background:linear-gradient(120deg,#b2a3ff,#8070ff);box-shadow:0 8px 28px #7d67ff38}.css-primary-btn:hover,.css-run-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px #7d67ff59}.css-secondary-btn,.css-reset-btn{color:#eeecfa;background:#ffffff09;border-color:#ffffff24}.css-secondary-btn:hover,.css-reset-btn:hover{border-color:#8975ffa6}.css-hero-meta{color:#9290a4;gap:24px;margin-top:35px;font-size:13px;display:flex}.css-hero-meta span:before{content:"✦";color:var(--css-purple-bright);margin-left:8px}.css-visual{place-items:center;min-height:420px;display:grid;position:relative}.css-preview-card{z-index:2;background:#110f20f0;border:1px solid #a697ff4d;border-radius:19px;width:min(100%,440px);position:relative;overflow:hidden;transform:perspective(1000px)rotateY(-5deg)rotateX(2deg);box-shadow:0 25px 90px #00000073,0 0 55px #8975ff24}.css-preview-top{border-bottom:1px solid var(--css-line);color:#aaa7bb;letter-spacing:1px;background:#ffffff0a;justify-content:space-between;align-items:center;height:47px;padding:0 18px;font:10px IBM Plex Mono,monospace;display:flex}.css-preview-top b{color:var(--css-purple-bright);letter-spacing:4px}.css-preview-art{background:radial-gradient(circle at 75% 25%,#50d9d24d,#0000 30%),linear-gradient(135deg,#28204c,#12162c 65%,#1b2941);place-items:center;min-height:270px;display:grid;position:relative;overflow:hidden}.css-art-sun{filter:blur(1px);opacity:.85;background:linear-gradient(135deg,#a89aff,#5141a8);border-radius:50%;width:210px;height:210px;position:absolute;top:-65px;left:-45px;box-shadow:0 0 70px #8975ff4d}.css-art-panel{z-index:1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:left;direction:ltr;background:#ffffff1f;border:1px solid #ffffff40;border-radius:13px;flex-direction:column;justify-content:center;width:75%;min-height:190px;padding:25px;display:flex;position:relative;box-shadow:0 20px 50px #0003}.css-art-panel>span{color:#b8adff;letter-spacing:3px;font:600 10px IBM Plex Mono,monospace}.css-art-panel strong{color:#fff;margin:13px 0;font:800 30px/1.2 IBM Plex Mono,monospace}.css-art-panel i{background:var(--css-cyan);border-radius:5px;width:45px;height:4px}.css-art-panel small{color:#c4c4d8;letter-spacing:1px;margin-top:15px;font:8px IBM Plex Mono,monospace}.css-preview-bottom{border-top:1px solid var(--css-line);color:#9290a4;align-items:center;gap:9px;height:48px;padding:0 16px;font:9px IBM Plex Mono,monospace;display:flex}.css-preview-bottom i{background:#8875ff;border-radius:4px;width:13px;height:13px}.css-preview-bottom i:nth-of-type(2){background:#50d9d2}.css-preview-bottom i:nth-of-type(3){background:#ff8db5}.css-preview-bottom i:nth-of-type(4){background:#f5bd72}.css-preview-bottom i:nth-of-type(5){background:#eeeaff}.css-preview-bottom b{color:#c2baff;margin-right:auto}.css-visual-orbit{border:1px solid #8975ff40;border-radius:50%;width:440px;height:190px;animation:12s linear infinite css-orbit-spin;position:absolute;transform:rotate(-28deg);box-shadow:0 0 25px #8975ff12}.orbit-b{border-color:#50d9d233;width:530px;height:245px;animation-direction:reverse;transform:rotate(35deg)}.orbit-c{border-color:#8975ff21;width:610px;height:300px;animation-duration:17s;transform:rotate(-58deg)}@keyframes css-orbit-spin{to{rotate:360deg}}.css-floating-symbol{z-index:3;color:var(--css-purple-bright);background:#1a1730;border:1px solid #a697ff73;place-items:center;display:grid;position:absolute;box-shadow:0 0 35px #8975ff33}.symbol-one{border-radius:19px;width:70px;height:70px;font:700 20px IBM Plex Mono,monospace;top:4%;right:4%;transform:rotate(9deg)}.symbol-two{width:58px;height:58px;color:var(--css-cyan);border-radius:17px;font-size:28px;bottom:5%;left:3%;transform:rotate(-10deg)}.css-floating-label{color:var(--css-cyan);letter-spacing:1px;background:#151b2c;border:1px solid #50d9d24d;border-radius:7px;padding:9px 13px;font:9px IBM Plex Mono,monospace;position:absolute;bottom:12%;right:2%}.css-stats{border:1px solid var(--css-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff06;border-radius:14px;grid-template-columns:repeat(4,1fr);width:min(1100px,100% - 48px);margin:0 auto 80px;padding:25px 15px;display:grid}.css-stats>div{border-left:1px solid var(--css-line);flex-direction:column;align-items:center;gap:5px;display:flex}.css-stats>div:last-child{border-left:0}.css-stats strong{color:var(--css-purple-bright);font:700 27px IBM Plex Mono,monospace}.css-stats span{color:#9290a4;font-size:13px}.css-section{width:min(1180px,100% - 48px);margin:0 auto;padding:65px 0;scroll-margin-top:25px}.css-section-heading{text-align:center;margin-bottom:35px}.css-section-heading h2{margin:12px 0 8px;font-size:clamp(27px,3.5vw,39px);font-weight:800}.css-section-heading p{color:#9996aa;margin:0;font-size:15px}.css-level-grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.css-level-card{border:1px solid var(--css-line);background:linear-gradient(145deg,#1f1c37f0,#11101eeb);border-radius:14px;padding:25px;transition:transform .25s,border-color .25s}.css-level-card:hover{border-color:#8975ff80;transform:translateY(-5px)}.css-level-top{justify-content:space-between;align-items:center;display:flex}.css-level-top>span{color:var(--css-purple-bright);font:700 32px IBM Plex Mono,monospace}.css-level-top b{color:#9692aa;letter-spacing:1px;font:10px IBM Plex Mono,monospace}.css-level-card h3{margin:15px 0 7px;font-size:21px}.css-level-card>p,.css-challenge p{color:#aaa7bb;font-size:14px;line-height:1.8}.css-topic-list{flex-wrap:wrap;gap:7px;margin:18px 0;display:flex}.css-topic-list span{color:#c7c3d7;border:1px solid #ffffff17;border-radius:6px;padding:6px 9px;font-size:11px}.css-challenge{border-right:2px solid var(--css-purple);background:#8975ff12;padding:13px}.css-challenge b{color:var(--css-purple-bright);font-size:13px}.css-challenge p{margin:5px 0 0}.css-project{color:#8ce4df;margin-top:17px;font-size:13px}.css-learning-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}.css-lesson-list,.css-lesson-content{border:1px solid var(--css-line);background:var(--css-panel);border-radius:14px;overflow:hidden}.css-lesson-list{padding:8px}.css-lesson-item{color:#eeecfa;text-align:right;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:12px;width:100%;padding:14px 12px;transition:all .2s;display:flex}.css-lesson-item:hover{background:#ffffff0a}.css-lesson-item.active{background:#8975ff1f;border-color:#8975ff59}.css-lesson-number{color:#aaa7bb;background:#ffffff0e;border-radius:8px;flex:0 0 34px;place-items:center;height:34px;font:12px IBM Plex Mono,monospace;display:grid}.css-lesson-item.active .css-lesson-number{background:var(--css-purple);color:#151020}.css-lesson-info{flex-direction:column;gap:4px;min-width:0;display:flex}.css-lesson-info strong{font-size:13px}.css-lesson-info small{color:#858196;font-size:11px}.css-lesson-arrow{color:#858196;margin-right:auto}.css-lesson-content{padding:29px}.css-lesson-kicker{color:var(--css-purple-bright);letter-spacing:1px;justify-content:space-between;font:10px IBM Plex Mono,monospace;display:flex}.css-lesson-kicker span:last-child{color:#858196}.css-lesson-content h3{margin:15px 0;font-size:27px}.css-explanation{color:#b4b1c4;font-size:15px;line-height:2}.css-lesson-content h4{margin:25px 0 10px;font-size:16px}.css-points{grid-template-columns:1fr 1fr;gap:10px 20px;padding:0;list-style:none;display:grid}.css-points li{color:#c0bdd0;font-size:13px;line-height:1.8}.css-points li:before{content:"✦";color:var(--css-purple-bright);margin-left:9px}.css-example{background:#0d0c19;border:1px solid #ffffff17;border-radius:10px;margin-top:23px;overflow:hidden}.css-example-heading,.css-editor-heading,.css-preview-heading{border-bottom:1px solid var(--css-line);color:#e9e5fa;justify-content:space-between;padding:12px 16px;font-size:12px;display:flex}.css-example-heading span:last-child,.css-editor-heading span:last-child,.css-preview-heading span:last-child{color:var(--css-purple-bright);font:10px IBM Plex Mono,monospace}.css-example pre{text-align:left;color:#b7adff;white-space:pre-wrap;direction:ltr;margin:0;padding:18px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.css-task{background:#8975ff14;border:1px solid #8975ff2e;border-radius:9px;margin-top:18px;padding:15px}.css-task b{color:var(--css-purple-bright);font-size:13px}.css-task p{color:#c5c1d4;margin:5px 0 0;font-size:13px;line-height:1.8}.css-lesson-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.css-complete-btn{color:#151020;background:#a99aff}.css-next-btn{color:#eee;border-color:var(--css-line);background:#29263f}.css-lab{grid-template-columns:1fr 1fr;gap:16px;display:grid}.css-editor,.css-preview{border:1px solid var(--css-line);background:#151329;border-radius:13px;min-width:0;overflow:hidden}.css-editor-heading,.css-preview-heading{background:#ffffff09}.css-editor textarea{resize:vertical;color:#c5baff;text-align:left;tab-size:2;direction:ltr;background:#0d0c19;border:0;outline:0;width:100%;min-height:340px;padding:20px;font:13px/1.8 IBM Plex Mono,monospace;display:block}.css-editor-actions{border-top:1px solid var(--css-line);gap:9px;padding:13px;display:flex}.css-run-btn,.css-reset-btn{min-height:39px;font-size:12px}.css-preview iframe{background:#fff;border:0;width:100%;height:410px;display:block}.css-preview-empty{color:#9996aa;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:410px;display:flex}.css-preview-empty>span{color:var(--css-purple-bright);text-shadow:0 0 25px #8975ff80;margin-bottom:14px;font-size:43px}.css-preview-empty b{color:#e4e1f5;font-size:16px}.css-preview-empty p{font-size:13px}.css-lab-note{color:#858196;text-align:center;font-size:12px}.css-quiz-start,.css-quiz-box{border:1px solid var(--css-line);background:var(--css-panel);border-radius:14px;max-width:800px;margin:auto;padding:30px}.css-quiz-start{text-align:center}.css-quiz-icon{width:58px;height:58px;color:var(--css-purple-bright);background:#8975ff1a;border:1px solid #8975ff66;border-radius:16px;place-items:center;margin:0 auto 15px;font-size:30px;display:grid}.css-quiz-start h3{margin:0 0 7px;font-size:21px}.css-quiz-start p{color:#9996aa;margin:0 0 20px;font-size:14px}.css-question{border-bottom:1px solid var(--css-line);padding:18px 0}.css-question h3{align-items:center;gap:12px;margin:0 0 14px;font-size:16px;display:flex}.css-question h3 span{color:var(--css-purple-bright);font:12px IBM Plex Mono,monospace}.css-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.css-options button{color:#c7c3d7;text-align:right;background:#ffffff06;border:1px solid #ffffff1a;border-radius:8px;padding:11px 13px;font-size:13px}.css-options button.selected{border-color:var(--css-purple);color:#c5baff;background:#8975ff21}.css-options button.correct{color:#7ce0b0;background:#3ebd831a;border-color:#3ebd83}.css-quiz-box>.css-primary-btn{margin-top:20px}.css-quiz-result{text-align:center;background:#8975ff14;border-radius:10px;margin-top:20px;padding:20px}.css-quiz-result>strong{color:var(--css-purple-bright);font:700 34px IBM Plex Mono,monospace}.css-quiz-result h3{margin-bottom:5px}.css-quiz-result p{color:#aaa7bb;font-size:13px}.css-full-course{background:radial-gradient(at 10%,#8975ff29,#0000 50%),#17142a;border:1px solid #8975ff47;border-radius:16px;align-items:center;gap:25px;padding:35px;display:flex}.css-course-symbol{color:#171020;background:linear-gradient(135deg,#b4a7ff,#7865ff);border-radius:20px;flex:0 0 76px;place-items:center;height:76px;font-size:25px;display:grid;box-shadow:0 0 30px #8975ff40}.css-full-course h2{margin:9px 0;font-size:24px}.css-full-course p{color:#aaa7bb;margin:0 0 18px;font-size:14px;line-height:1.8}.css-footer{border-top:1px solid var(--css-line);text-align:center;background:#00000026;margin-top:65px;padding:38px 20px}.css-footer strong{color:var(--css-purple-bright);font:700 21px IBM Plex Mono,monospace}.css-footer p{color:#a2a0b2;margin:8px 0 15px;font-size:13px}.css-footer span{color:#858196;margin-top:5px;font-size:11px;display:block}@media (width<=900px){.css-hero{gap:25px}.css-topbar nav{gap:15px}.css-language{display:none}.css-learning-layout{grid-template-columns:260px 1fr}.css-lesson-content{padding:22px}}@media (width<=700px){.css-topbar{flex-wrap:wrap;gap:12px;width:calc(100% - 30px);height:auto;min-height:70px;padding:14px 0}.css-topbar nav{order:2;justify-content:space-between;gap:8px;width:100%;overflow-x:auto}.css-topbar nav a{white-space:nowrap;font-size:12px}.css-hero{grid-template-columns:1fr;gap:35px;width:calc(100% - 34px);padding:55px 0 45px}.css-hero h1{font-size:46px}.css-hero-content>p{font-size:15px}.css-visual{min-height:330px}.css-preview-card{width:94%}.css-visual-orbit{width:330px;height:330px}.orbit-b{width:390px;height:190px}.orbit-c{width:430px;height:240px}.css-stats{grid-template-columns:1fr 1fr;row-gap:22px;width:calc(100% - 30px);margin-bottom:45px}.css-stats>div:nth-child(2){border-left:0}.css-stats>div:nth-child(3),.css-stats>div:nth-child(4){border-top:1px solid var(--css-line);padding-top:15px}.css-section{width:calc(100% - 30px);padding:45px 0}.css-level-grid,.css-learning-layout{grid-template-columns:1fr}.css-lesson-list{grid-template-columns:1fr 1fr;display:grid}.css-lesson-item{gap:7px;padding:10px 7px}.css-lesson-info strong{font-size:11px}.css-lesson-number{flex-basis:29px;height:29px;font-size:10px}.css-lesson-content{padding:19px}.css-lesson-content h3{font-size:23px}.css-points{grid-template-columns:1fr;gap:5px}.css-lab{grid-template-columns:1fr}.css-editor textarea{min-height:270px}.css-preview iframe,.css-preview-empty{height:330px;min-height:330px}.css-options{grid-template-columns:1fr}.css-quiz-start,.css-quiz-box{padding:20px}.css-full-course{flex-direction:column;align-items:flex-start;padding:24px}.css-full-course h2{font-size:21px}.css-float-token{opacity:.75}}@media (prefers-reduced-motion:reduce){.css-course *,.css-course :before,.css-course :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.js-course{--js-green:#25e6a0;--js-green-bright:#65ffc1;--js-blue:#43baff;--js-purple:#a78bfa;--js-bg:#080e13;--js-panel:#0f1920f0;--js-line:#ffffff17;isolation:isolate;background:var(--js-bg);color:#edf8f4;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.js-course *{box-sizing:border-box}.js-course a{color:inherit;text-decoration:none}.js-course button,.js-course textarea{font:inherit}.js-course button{cursor:pointer}.js-course button:disabled{cursor:not-allowed;opacity:.4}.js-background{z-index:-1;pointer-events:none;background:radial-gradient(at 75% 8%,#1be19726,#0000 34%),radial-gradient(at 5% 45%,#289aff21,#0000 35%),linear-gradient(#080e13,#0b151c 48%,#080e13);position:absolute;inset:0;overflow:hidden}.js-grid{opacity:.35;background-image:linear-gradient(#25e6a017 1px,#0000 1px),linear-gradient(90deg,#25e6a017 1px,#0000 1px);background-size:43px 43px;animation:9s linear infinite js-grid-move;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 92%);mask-image:linear-gradient(#000,#0000 92%)}@keyframes js-grid-move{to{background-position:43px 43px}}.js-glow{filter:blur(95px);opacity:.34;border-radius:50%;width:460px;height:460px;animation:7s ease-in-out infinite alternate js-glow-move;position:absolute}.js-glow-one{background:#00d995;top:5%;right:-180px}.js-glow-two{background:#168fff;animation-delay:-3s;top:40%;left:-190px}@keyframes js-glow-move{0%{transform:translate(0)scale(.8)}to{transform:translate(-90px,100px)scale(1.25)}}.js-circuit{border:1px solid #25e6a045;border-radius:50%;width:360px;height:360px;animation:12s linear infinite js-circuit-spin;position:absolute;box-shadow:0 0 35px #25e6a01f,inset 0 0 35px #25e6a00f}.js-circuit-one{top:12%;left:15%}.js-circuit-two{border-color:#43baff3d;width:500px;height:500px;animation-duration:16s;animation-direction:reverse;top:54%;right:-180px}@keyframes js-circuit-spin{to{rotate:360deg}}.js-code-float{color:#4bffb4a6;text-shadow:0 0 18px #25e6a04d;white-space:nowrap;font:600 clamp(13px,1.6vw,21px) IBM Plex Mono,monospace;animation:5s ease-in-out infinite alternate js-code-float;position:absolute}.js-code-one{top:8%;left:5%}.js-code-two{color:#43baffb3;animation-delay:-2s;top:21%;right:5%}.js-code-three{animation-delay:-3s;top:38%;left:10%}.js-code-four{color:#a78bfab3;animation-delay:-1s;top:55%;right:8%}.js-code-five{animation-delay:-4s;top:72%;left:4%}.js-code-six{color:#43baffb3;animation-delay:-2.5s;top:89%;right:10%}@keyframes js-code-float{0%{opacity:.45;transform:translateY(-18px)rotate(-3deg)}to{opacity:1;transform:translateY(24px)rotate(4deg)}}.js-orbit{border:1px solid #25e6a040;border-radius:50%;animation:13s linear infinite js-orbit-spin;position:absolute;box-shadow:0 0 25px #25e6a01a}.js-orbit-one{width:420px;height:420px;top:10%;left:10%}.js-orbit-two{border-color:#43baff3b;width:570px;height:570px;animation-duration:17s;animation-direction:reverse;top:40%;right:-260px}.js-orbit-three{border-color:#a78bfa40;width:250px;height:250px;animation-duration:9s;top:70%;left:55%}@keyframes js-orbit-spin{to{rotate:360deg}}.js-particle{background:var(--js-green);width:9px;height:9px;box-shadow:0 0 18px var(--js-green);border-radius:50%;animation:2s ease-in-out infinite alternate js-particle-pulse;position:absolute}.js-particle-one{top:15%;left:45%}.js-particle-two{background:var(--js-blue);box-shadow:0 0 18px var(--js-blue);animation-delay:-.7s;top:58%;right:25%}.js-particle-three{background:var(--js-purple);box-shadow:0 0 18px var(--js-purple);animation-delay:-1.3s;top:83%;left:25%}@keyframes js-particle-pulse{0%{opacity:.5;transform:scale(.6)}to{opacity:1;transform:scale(1.7)}}.js-topbar{z-index:5;border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;gap:20px;width:min(1240px,100% - 48px);min-height:82px;margin:auto;display:flex;position:relative}.js-logo{letter-spacing:-1px;white-space:nowrap;align-items:center;gap:10px;font:700 21px IBM Plex Mono,monospace;display:inline-flex}.js-logo-icon{color:var(--js-green);filter:drop-shadow(0 0 10px #25e6a0a6);place-items:center;display:grid}.js-logo-dot{color:var(--js-green)}.js-topbar nav{align-items:center;gap:25px;display:flex}.js-topbar nav a{color:#a9b8b6;font-size:14px;transition:color .2s}.js-topbar nav a:hover{color:var(--js-green)}.js-topbar-status{color:var(--js-green);letter-spacing:1px;white-space:nowrap;font:500 10px IBM Plex Mono,monospace}.js-topbar-status i{background:var(--js-green);width:7px;height:7px;box-shadow:0 0 12px var(--js-green);border-radius:50%;margin-left:6px;display:inline-block}.js-hero{grid-template-columns:1fr 1fr;align-items:center;gap:45px;width:min(1240px,100% - 48px);min-height:610px;margin:auto;padding:65px 0 80px;display:grid}.js-eyebrow{color:var(--js-green-bright);letter-spacing:1px;background:#25e6a012;border:1px solid #25e6a04d;border-radius:30px;align-items:center;gap:10px;padding:10px 15px;font:600 10px IBM Plex Mono,monospace;display:inline-flex}.js-live-dot{background:var(--js-green);width:8px;height:8px;box-shadow:0 0 12px var(--js-green);border-radius:50%;animation:1s ease-in-out infinite alternate js-particle-pulse}.js-hero h1{letter-spacing:-1.5px;margin:27px 0 18px;font-size:clamp(43px,5.2vw,68px);font-weight:900;line-height:1.3}.js-hero h1 strong{color:var(--js-green);text-shadow:0 0 35px #25e6a059}.js-hero-content>p{color:#aabbb7;max-width:560px;margin:0;font-size:17px;line-height:2}.js-hero-actions{flex-wrap:wrap;gap:13px;margin-top:30px;display:flex}.js-primary-btn,.js-secondary-btn,.js-complete-btn,.js-next-btn,.js-run-btn,.js-reset-btn{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 20px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.js-primary-btn,.js-run-btn{color:#07160f;background:linear-gradient(120deg,#70ffc1,#20d995);box-shadow:0 8px 28px #25e6a033}.js-primary-btn:hover,.js-run-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #25e6a059}.js-secondary-btn,.js-reset-btn{color:#eaf5f1;background:#ffffff09;border-color:#ffffff24}.js-secondary-btn:hover,.js-reset-btn:hover{border-color:var(--js-green)}.js-hero-meta{color:#9baaa7;flex-wrap:wrap;gap:23px;margin-top:35px;font-size:13px;display:flex}.js-hero-meta span{align-items:center;gap:7px;display:inline-flex}.js-hero-meta svg{color:var(--js-green)}.js-visual{place-items:center;min-height:440px;display:grid;position:relative}.js-terminal-card{z-index:3;background:#0a1318f5;border:1px solid #25e6a052;border-radius:16px;width:min(100%,455px);position:relative;overflow:hidden;transform:perspective(1000px)rotateY(-5deg)rotateX(2deg);box-shadow:0 25px 90px #00000080,0 0 50px #25e6a01f}.js-terminal-top{border-bottom:1px solid var(--js-line);color:#aabbb7;background:#ffffff09;justify-content:space-between;align-items:center;height:48px;padding:0 17px;font:11px IBM Plex Mono,monospace;display:flex}.js-window-dots{gap:6px;display:flex}.js-window-dots i{background:#ff6e78;border-radius:50%;width:9px;height:9px}.js-window-dots i:nth-child(2){background:#f3c65e}.js-window-dots i:nth-child(3){background:#38d99a}.js-terminal-live{color:var(--js-green);font-size:9px}.js-terminal-code{color:#d6e6df;padding:25px 20px;font:12px/2.5 IBM Plex Mono,monospace;overflow-x:auto}.js-terminal-code>div{white-space:pre}.js-terminal-code>div>span:first-child{color:#50625e;margin-right:15px}.js-purple{color:#c49aff}.js-blue{color:#61c5ff}.js-green{color:#65e6a9}.js-yellow{color:#f4d17b}.js-terminal-output{border-top:1px solid var(--js-line);background:#25e6a009;flex-direction:column;gap:9px;padding:17px 20px;font:11px IBM Plex Mono,monospace;display:flex}.js-terminal-output>span{color:#82958e;letter-spacing:2px;font-size:9px}.js-terminal-output strong{color:var(--js-green)}.js-terminal-output i{color:#8ca69b;align-items:center;gap:6px;font-size:9px;font-style:normal;display:flex}.js-terminal-output i svg{color:var(--js-green)}.js-visual-orbit{border:1px solid #25e6a04d;border-radius:50%;width:450px;height:190px;animation:12s linear infinite js-orbit-spin;position:absolute;transform:rotate(-28deg)}.js-visual-orbit.orbit-two{border-color:#43baff45;width:530px;height:245px;animation-duration:15s;animation-direction:reverse;transform:rotate(35deg)}.js-visual-orbit.orbit-three{border-color:#a78bfa2e;width:610px;height:300px;animation-duration:18s;transform:rotate(-58deg)}.js-floating-icon{z-index:4;width:60px;height:60px;color:var(--js-green);background:#10251f;border:1px solid #25e6a073;border-radius:16px;place-items:center;animation:4s ease-in-out infinite alternate js-code-float;display:grid;position:absolute;box-shadow:0 0 30px #25e6a033}.js-icon-braces{top:4%;right:5%}.js-icon-cpu{color:var(--js-blue);background:#10202d;border-color:#43baff73;animation-delay:-2s;bottom:6%;left:4%}.js-floating-label{z-index:4;color:var(--js-green);letter-spacing:1px;background:#10251f;border:1px solid #25e6a04d;border-radius:7px;padding:9px 13px;font:9px IBM Plex Mono,monospace;position:absolute;bottom:12%;right:3%}.js-progress-section{border:1px solid var(--js-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff06;border-radius:14px;grid-template-columns:2fr repeat(3,1fr);align-items:center;gap:25px;width:min(1100px,100% - 48px);margin:0 auto 65px;padding:25px;display:grid}.js-progress-info>div:first-child{color:#aabbb7;justify-content:space-between;font-size:13px;display:flex}.js-progress-info strong{color:var(--js-green);font:700 17px IBM Plex Mono,monospace}.js-progress-track{background:#ffffff17;border-radius:10px;height:7px;margin:12px 0 8px;overflow:hidden}.js-progress-track>div{border-radius:inherit;background:linear-gradient(90deg,#168cfa,#25e6a0);height:100%;transition:width .4s;box-shadow:0 0 15px #25e6a066}.js-progress-info small{color:#82958e;font-size:11px}.js-stat{border-right:1px solid var(--js-line);flex-direction:column;align-items:center;gap:6px;display:flex}.js-stat strong{color:var(--js-green);font:700 25px IBM Plex Mono,monospace}.js-stat span{color:#96a9a2;font-size:12px}.js-section{width:min(1180px,100% - 48px);margin:0 auto;padding:65px 0;scroll-margin-top:25px}.js-section-heading{text-align:center;margin-bottom:35px}.js-section-heading>span{color:var(--js-green);letter-spacing:1.5px;font:600 11px IBM Plex Mono,monospace}.js-section-heading h2{margin:12px 0 8px;font-size:clamp(27px,3.5vw,39px);font-weight:800}.js-section-heading p{color:#99aaa4;margin:0;font-size:15px}.js-level-grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.js-level-card{border:1px solid var(--js-line);background:linear-gradient(145deg,#142727f0,#0c141bf2);border-radius:14px;padding:25px;transition:transform .25s,border-color .25s,box-shadow .25s}.js-level-card:hover{border-color:#25e6a080;transform:translateY(-6px);box-shadow:0 15px 35px #0003}.js-level-top{justify-content:space-between;align-items:center;display:flex}.js-level-top>span{color:var(--js-green);font:700 32px IBM Plex Mono,monospace}.js-level-top small{color:#8da69c;letter-spacing:1px;font:10px IBM Plex Mono,monospace}.js-level-card h3{margin:15px 0 7px;font-size:21px}.js-level-card>p,.js-challenge p{color:#aabbb7;font-size:14px;line-height:1.8}.js-topic-list{flex-wrap:wrap;gap:7px;margin:18px 0;display:flex}.js-topic-list span{color:#b7d9ca;background:#25e6a00b;border:1px solid #25e6a029;border-radius:6px;padding:6px 9px;font-size:11px}.js-challenge{border-right:2px solid var(--js-green);background:#25e6a00f;padding:13px}.js-challenge b{color:var(--js-green);align-items:center;gap:7px;font-size:13px;display:flex}.js-challenge p{margin:5px 0 0}.js-project{color:#70c9ff;align-items:center;gap:7px;margin-top:17px;font-size:13px;display:flex}.js-learning-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}.js-lesson-list,.js-lesson-content{border:1px solid var(--js-line);background:var(--js-panel);border-radius:14px;overflow:hidden}.js-lesson-list{padding:9px}.js-list-heading{color:#dcebe5;justify-content:space-between;padding:14px 12px;font-size:14px;display:flex}.js-list-heading small{color:var(--js-green);font:12px IBM Plex Mono,monospace}.js-lesson-item{color:#eaf5f1;text-align:right;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:11px;width:100%;margin-bottom:3px;padding:13px 10px;transition:all .2s;display:flex}.js-lesson-item:hover{background:#ffffff0b}.js-lesson-item.active{background:#25e6a017;border-color:#25e6a04d}.js-lesson-number{color:#aabbb7;background:#ffffff0e;border-radius:8px;flex:0 0 34px;place-items:center;height:34px;font:12px IBM Plex Mono,monospace;display:grid}.js-lesson-item.active .js-lesson-number{background:var(--js-green);color:#07160f}.js-lesson-item.is-done .js-lesson-number{color:var(--js-green)}.js-lesson-item.active.is-done .js-lesson-number{color:#07160f}.js-lesson-info{flex-direction:column;gap:4px;min-width:0;display:flex}.js-lesson-info strong{font-size:12px}.js-lesson-info small{color:#84968f;font-size:10px}.js-lesson-arrow{color:#82958e;margin-right:auto}.js-lesson-content{padding:29px}.js-lesson-kicker{color:var(--js-green);letter-spacing:1px;justify-content:space-between;font:10px IBM Plex Mono,monospace;display:flex}.js-lesson-kicker span:last-child{color:#84968f}.js-lesson-content h3{margin:15px 0;font-size:27px}.js-explanation{color:#b4c4bd;font-size:15px;line-height:2}.js-lesson-content h4{margin:25px 0 10px;font-size:16px}.js-points{grid-template-columns:1fr 1fr;gap:10px 20px;padding:0;list-style:none;display:grid}.js-points li{color:#c0d1ca;font-size:13px;line-height:1.8}.js-points li:before{content:"✦";color:var(--js-green);margin-left:9px}.js-example{background:#080e13;border:1px solid #ffffff17;border-radius:10px;margin-top:23px;overflow:hidden}.js-example-heading,.js-editor-heading,.js-preview-heading{border-bottom:1px solid var(--js-line);color:#e9f4ef;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;display:flex}.js-example-heading span:last-child,.js-editor-heading span:last-child,.js-preview-heading span:last-child{color:var(--js-green);font:10px IBM Plex Mono,monospace}.js-example pre{text-align:left;color:#72e7b0;white-space:pre-wrap;direction:ltr;margin:0;padding:18px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.js-task{background:#25e6a011;border:1px solid #25e6a02e;border-radius:9px;margin-top:18px;padding:15px}.js-task b{color:var(--js-green);font-size:13px}.js-task p{color:#c5d5cd;margin:5px 0 0;font-size:13px;line-height:1.8}.js-lesson-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.js-complete-btn{color:#07160f;background:var(--js-green)}.js-next-btn{color:#eee;border-color:var(--js-line);background:#202c31}.js-lab{grid-template-columns:1fr 1fr;gap:16px;display:grid}.js-editor,.js-preview{border:1px solid var(--js-line);background:#101a20;border-radius:13px;min-width:0;overflow:hidden}.js-editor-heading,.js-preview-heading{background:#ffffff09}.js-editor-heading span:first-child,.js-preview-heading span:first-child{align-items:center;gap:8px;display:inline-flex}.js-editor-heading svg,.js-preview-heading svg{color:var(--js-green)}.js-editor textarea{resize:vertical;color:#80edb8;text-align:left;tab-size:2;direction:ltr;background:#080e13;border:0;outline:0;width:100%;min-height:340px;padding:20px;font:13px/1.8 IBM Plex Mono,monospace;display:block}.js-editor-actions{border-top:1px solid var(--js-line);gap:9px;padding:13px;display:flex}.js-run-btn,.js-reset-btn{min-height:39px;font-size:12px}.js-preview iframe{background:#10151b;border:0;width:100%;height:410px;display:block}.js-lab-note{color:#82958e;text-align:center;margin-top:15px;font-size:12px}.js-quiz-start,.js-quiz-box{border:1px solid var(--js-line);background:var(--js-panel);border-radius:14px;max-width:800px;margin:auto;padding:30px}.js-quiz-start{text-align:center}.js-quiz-icon{width:58px;height:58px;color:var(--js-green);background:#25e6a01a;border:1px solid #25e6a066;border-radius:16px;place-items:center;margin:0 auto 15px;display:grid}.js-quiz-start h3{margin:0 0 7px;font-size:21px}.js-quiz-start p{color:#99aaa4;margin:0 0 20px;font-size:14px}.js-question{border-bottom:1px solid var(--js-line);padding:18px 0}.js-question h3{align-items:center;gap:12px;margin:0 0 14px;font-size:16px;display:flex}.js-question h3 span{color:var(--js-green);font:12px IBM Plex Mono,monospace}.js-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.js-options button{color:#c7d7d0;text-align:right;background:#ffffff06;border:1px solid #ffffff1a;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;font-size:13px;transition:all .2s;display:flex}.js-options button:hover:not(:disabled){border-color:#25e6a080}.js-options button.selected{border-color:var(--js-green);color:#8affc7;background:#25e6a01f}.js-options button.correct{color:#7ce0b0;background:#3ebd831a;border-color:#3ebd83}.js-quiz-box>.js-primary-btn{margin-top:20px}.js-quiz-result{text-align:center;background:#25e6a012;border-radius:10px;margin-top:20px;padding:20px}.js-quiz-result>strong{color:var(--js-green);font:700 34px IBM Plex Mono,monospace}.js-quiz-result h3{margin-bottom:5px}.js-quiz-result p{color:#aabbb7;font-size:13px}.js-full-course{background:radial-gradient(at 10%,#25e6a024,#0000 50%),#111f22;border:1px solid #25e6a040;border-radius:16px;align-items:center;gap:25px;padding:35px;display:flex}.js-course-symbol{color:#07160f;background:linear-gradient(135deg,#70ffc1,#18b77c);border-radius:20px;flex:0 0 76px;place-items:center;height:76px;display:grid;box-shadow:0 0 30px #25e6a033}.js-course-info>span{color:var(--js-green);letter-spacing:1.4px;font:600 10px IBM Plex Mono,monospace}.js-full-course h2{margin:9px 0;font-size:24px}.js-full-course p{color:#aabbb7;margin:0 0 18px;font-size:14px;line-height:1.8}.js-footer{border-top:1px solid var(--js-line);text-align:center;background:#00000026;margin-top:65px;padding:38px 20px}.js-footer strong{color:var(--js-green);font:700 21px IBM Plex Mono,monospace}.js-footer strong span{color:#fff}.js-footer p{color:#a2b4ac;margin:8px 0 15px;font-size:13px}.js-footer small{color:#82958e;font:10px IBM Plex Mono,monospace}@media (width<=900px){.js-hero{gap:25px}.js-topbar nav{gap:13px}.js-topbar-status{display:none}.js-learning-layout{grid-template-columns:260px 1fr}.js-lesson-content{padding:22px}.js-progress-section{grid-template-columns:1fr 1fr 1fr}.js-progress-info{grid-column:1/-1}.js-stat{border-right:0}}@media (width<=700px){.js-topbar{flex-wrap:wrap;gap:12px;width:calc(100% - 30px);min-height:70px;padding:14px 0}.js-topbar nav{order:2;justify-content:space-between;gap:8px;width:100%;overflow-x:auto}.js-topbar nav a{white-space:nowrap;font-size:12px}.js-logo{font-size:19px}.js-hero{grid-template-columns:1fr;gap:35px;width:calc(100% - 34px);padding:55px 0 45px}.js-hero h1{font-size:46px}.js-hero-content>p{font-size:15px}.js-hero-meta{gap:13px}.js-visual{min-height:340px}.js-terminal-card{width:94%}.js-terminal-code{padding:17px 12px;font-size:10px}.js-visual-orbit{width:330px;height:330px}.js-visual-orbit.orbit-two{width:390px;height:190px}.js-visual-orbit.orbit-three{width:430px;height:240px}.js-progress-section{grid-template-columns:1fr 1fr 1fr;gap:15px;width:calc(100% - 30px);margin-bottom:40px;padding:20px 12px}.js-progress-info{grid-column:1/-1}.js-stat strong{font-size:21px}.js-stat span{text-align:center;font-size:10px}.js-section{width:calc(100% - 30px);padding:45px 0}.js-level-grid,.js-learning-layout{grid-template-columns:1fr}.js-lesson-list{grid-template-columns:1fr 1fr;display:grid}.js-list-heading{grid-column:1/-1}.js-lesson-item{gap:7px;padding:10px 7px}.js-lesson-info strong{font-size:10px}.js-lesson-info small{font-size:9px}.js-lesson-number{flex-basis:29px;height:29px;font-size:10px}.js-lesson-content{padding:19px}.js-lesson-content h3{font-size:23px}.js-points{grid-template-columns:1fr;gap:5px}.js-lab{grid-template-columns:1fr}.js-editor textarea{min-height:270px}.js-preview iframe{height:410px}.js-options{grid-template-columns:1fr}.js-quiz-start,.js-quiz-box{padding:20px}.js-full-course{flex-direction:column;align-items:flex-start;padding:24px}.js-full-course h2{font-size:21px}.js-code-float{opacity:.8}}@media (prefers-reduced-motion:reduce){.js-course *,.js-course :before,.js-course :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.py-course{--py-orange:#ffb547;--py-orange-bright:#ffd477;--py-yellow:#ffe28a;--py-blue:#58b9ed;--py-bg:#100e0a;--py-panel:#1d1811f0;--py-line:#ffffff17;isolation:isolate;background:var(--py-bg);color:#fff7e9;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.py-course *{box-sizing:border-box}.py-course a{color:inherit;text-decoration:none}.py-course button,.py-course textarea{font:inherit}.py-course button{cursor:pointer}.py-course button:disabled{cursor:not-allowed;opacity:.4}.py-background{z-index:-1;pointer-events:none;background:radial-gradient(at 75% 10%,#ffa9312b,#0000 34%),radial-gradient(at 5% 48%,#429ddb21,#0000 35%),linear-gradient(#100e0a,#19140d 48%,#100e0a);position:absolute;inset:0;overflow:hidden}.py-grid{opacity:.34;background-image:linear-gradient(#ffb54717 1px,#0000 1px),linear-gradient(90deg,#ffb54717 1px,#0000 1px);background-size:45px 45px;animation:8s linear infinite py-grid-move;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 92%);mask-image:linear-gradient(#000,#0000 92%)}@keyframes py-grid-move{to{background-position:45px 45px}}.py-glow{filter:blur(95px);opacity:.35;border-radius:50%;width:450px;height:450px;animation:7s ease-in-out infinite alternate py-glow-move;position:absolute}.py-glow-one{background:#ff9f25;top:5%;right:-180px}.py-glow-two{background:#258fd2;animation-delay:-3s;top:45%;left:-190px}@keyframes py-glow-move{0%{transform:translate(0)scale(.8)}to{transform:translate(-85px,95px)scale(1.25)}}.py-hexagon{border:1px solid #ffb54747;width:250px;height:250px;animation:12s linear infinite py-hex-spin;position:absolute;transform:rotate(30deg);box-shadow:0 0 35px #ffb54717}.py-hexagon-one{border-radius:25px;top:15%;left:13%}.py-hexagon-two{border-color:#58b9ed45;width:330px;height:330px;animation-duration:16s;animation-direction:reverse;top:60%;right:-100px}@keyframes py-hex-spin{to{rotate:360deg}}.py-code-float{color:#ffbe5bad;text-shadow:0 0 18px #ffb5474d;white-space:nowrap;font:600 clamp(13px,1.6vw,21px) IBM Plex Mono,monospace;animation:5s ease-in-out infinite alternate py-code-float;position:absolute}.py-code-one{top:8%;left:5%}.py-code-two{color:#58b9edbf;animation-delay:-2s;top:21%;right:5%}.py-code-three{animation-delay:-3s;top:38%;left:10%}.py-code-four{color:#ffe28ab3;animation-delay:-1s;top:55%;right:8%}.py-code-five{animation-delay:-4s;top:73%;left:4%}.py-code-six{color:#58b9edb3;animation-delay:-2.5s;top:90%;right:10%}@keyframes py-code-float{0%{opacity:.45;transform:translateY(-18px)rotate(-3deg)}to{opacity:1;transform:translateY(24px)rotate(4deg)}}.py-orbit{border:1px solid #ffb54745;border-radius:50%;animation:13s linear infinite py-orbit-spin;position:absolute;box-shadow:0 0 25px #ffb5471a}.py-orbit-one{width:430px;height:430px;top:12%;left:10%}.py-orbit-two{border-color:#58b9ed40;width:560px;height:560px;animation-duration:17s;animation-direction:reverse;top:42%;right:-250px}@keyframes py-orbit-spin{to{rotate:360deg}}.py-particle{background:var(--py-orange);width:9px;height:9px;box-shadow:0 0 18px var(--py-orange);border-radius:50%;animation:2s ease-in-out infinite alternate py-particle-pulse;position:absolute}.py-particle-one{top:15%;left:45%}.py-particle-two{background:var(--py-blue);box-shadow:0 0 18px var(--py-blue);animation-delay:-.7s;top:58%;right:25%}.py-particle-three{background:var(--py-yellow);box-shadow:0 0 18px var(--py-yellow);animation-delay:-1.3s;top:83%;left:25%}@keyframes py-particle-pulse{0%{opacity:.5;transform:scale(.6)}to{opacity:1;transform:scale(1.7)}}.py-topbar{z-index:5;border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;gap:20px;width:min(1240px,100% - 48px);min-height:82px;margin:auto;display:flex;position:relative}.py-logo{letter-spacing:-1px;white-space:nowrap;align-items:center;gap:10px;font:700 21px IBM Plex Mono,monospace;display:inline-flex}.py-logo-icon{color:var(--py-orange);filter:drop-shadow(0 0 10px #ffb54799);place-items:center;display:grid}.py-logo-dot{color:var(--py-orange)}.py-topbar nav{align-items:center;gap:25px;display:flex}.py-topbar nav a{color:#b7ad9d;font-size:14px;transition:color .2s}.py-topbar nav a:hover{color:var(--py-orange)}.py-topbar-status{color:var(--py-orange);letter-spacing:1px;white-space:nowrap;font:500 10px IBM Plex Mono,monospace}.py-topbar-status i{background:var(--py-orange);width:7px;height:7px;box-shadow:0 0 12px var(--py-orange);border-radius:50%;margin-left:6px;display:inline-block}.py-hero{grid-template-columns:1fr 1fr;align-items:center;gap:45px;width:min(1240px,100% - 48px);min-height:610px;margin:auto;padding:65px 0 80px;display:grid}.py-eyebrow{color:var(--py-orange-bright);letter-spacing:1px;background:#ffb54714;border:1px solid #ffb54752;border-radius:30px;align-items:center;gap:10px;padding:10px 15px;font:600 10px IBM Plex Mono,monospace;display:inline-flex}.py-live-dot{background:var(--py-orange);width:8px;height:8px;box-shadow:0 0 12px var(--py-orange);border-radius:50%;animation:1s ease-in-out infinite alternate py-particle-pulse}.py-hero h1{letter-spacing:-1.5px;margin:27px 0 18px;font-size:clamp(43px,5.2vw,68px);font-weight:900;line-height:1.3}.py-hero h1 strong{color:var(--py-orange);text-shadow:0 0 35px #ffb54759}.py-hero-content>p{color:#b9ad9c;max-width:560px;margin:0;font-size:17px;line-height:2}.py-hero-actions{flex-wrap:wrap;gap:13px;margin-top:30px;display:flex}.py-primary-btn,.py-secondary-btn,.py-complete-btn,.py-next-btn,.py-run-btn,.py-reset-btn{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 20px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.py-primary-btn,.py-run-btn{color:#1c1307;background:linear-gradient(120deg,#ffe09a,#ffad36);box-shadow:0 8px 28px #ffb54733}.py-primary-btn:hover,.py-run-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #ffb54759}.py-secondary-btn,.py-reset-btn{color:#fff4df;background:#ffffff09;border-color:#ffffff24}.py-secondary-btn:hover,.py-reset-btn:hover{border-color:var(--py-orange)}.py-hero-meta{color:#a99e8d;flex-wrap:wrap;gap:23px;margin-top:35px;font-size:13px;display:flex}.py-hero-meta span{align-items:center;gap:7px;display:inline-flex}.py-hero-meta svg{color:var(--py-orange)}.py-visual{place-items:center;min-height:440px;display:grid;position:relative}.py-terminal-card{z-index:3;background:#15120df7;border:1px solid #ffb54759;border-radius:16px;width:min(100%,455px);position:relative;overflow:hidden;transform:perspective(1000px)rotateY(-5deg)rotateX(2deg);box-shadow:0 25px 90px #00000080,0 0 50px #ffb54721}.py-terminal-top{border-bottom:1px solid var(--py-line);color:#b8ad9d;background:#ffffff09;justify-content:space-between;align-items:center;height:48px;padding:0 17px;font:11px IBM Plex Mono,monospace;display:flex}.py-window-dots{gap:6px;display:flex}.py-window-dots i{background:#ff6e78;border-radius:50%;width:9px;height:9px}.py-window-dots i:nth-child(2){background:#f3c65e}.py-window-dots i:nth-child(3){background:#38d99a}.py-terminal-live{color:var(--py-orange);font-size:9px}.py-terminal-code{color:#eee1ca;padding:25px 20px;font:12px/2.5 IBM Plex Mono,monospace;overflow-x:auto}.py-terminal-code>div{white-space:pre}.py-terminal-code>div>span:first-child{color:#71624c;margin-right:15px}.py-purple{color:#d49aff}.py-blue{color:#65c8ff}.py-green{color:#9ee4a3}.py-yellow{color:#ffd477}.py-comment{color:#8a9a7a}.py-terminal-output{border-top:1px solid var(--py-line);background:#ffb5470b;flex-direction:column;gap:9px;padding:17px 20px;font:11px IBM Plex Mono,monospace;display:flex}.py-terminal-output>span{color:#a3947c;letter-spacing:2px;font-size:9px}.py-terminal-output strong{color:var(--py-orange-bright)}.py-terminal-output i{color:#a99b85;align-items:center;gap:6px;font-size:9px;font-style:normal;display:flex}.py-terminal-output i svg{color:#80d89e}.py-visual-orbit{border:1px solid #ffb5474d;border-radius:50%;width:450px;height:190px;animation:12s linear infinite py-orbit-spin;position:absolute;transform:rotate(-28deg)}.py-visual-orbit-two{border-color:#58b9ed45;width:550px;height:245px;animation-duration:16s;animation-direction:reverse;transform:rotate(35deg)}.py-floating-icon{z-index:4;width:60px;height:60px;color:var(--py-orange);background:#2a2012;border:1px solid #ffb54773;border-radius:16px;place-items:center;animation:4s ease-in-out infinite alternate py-code-float;display:grid;position:absolute;box-shadow:0 0 30px #ffb54733}.py-icon-braces{top:4%;right:5%}.py-icon-cpu{color:var(--py-blue);background:#14232d;border-color:#58b9ed73;animation-delay:-2s;bottom:6%;left:4%}.py-floating-label{z-index:4;color:var(--py-orange);letter-spacing:1px;background:#282014;border:1px solid #ffb5474d;border-radius:7px;padding:9px 13px;font:9px IBM Plex Mono,monospace;position:absolute;bottom:12%;right:3%}.py-progress-section{border:1px solid var(--py-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff06;border-radius:14px;grid-template-columns:2fr repeat(3,1fr);align-items:center;gap:25px;width:min(1100px,100% - 48px);margin:0 auto 65px;padding:25px;display:grid}.py-progress-info>div:first-child{color:#b9ad9c;justify-content:space-between;font-size:13px;display:flex}.py-progress-info strong{color:var(--py-orange);font:700 17px IBM Plex Mono,monospace}.py-progress-track{background:#ffffff17;border-radius:10px;height:7px;margin:12px 0 8px;overflow:hidden}.py-progress-track>div{border-radius:inherit;background:linear-gradient(90deg,#e98a2b,#ffcf70);height:100%;transition:width .4s;box-shadow:0 0 15px #ffb54766}.py-progress-info small{color:#a3947c;font-size:11px}.py-stat{border-right:1px solid var(--py-line);flex-direction:column;align-items:center;gap:6px;display:flex}.py-stat strong{color:var(--py-orange);font:700 25px IBM Plex Mono,monospace}.py-stat span{color:#aa9e8b;font-size:12px}.py-section{width:min(1180px,100% - 48px);margin:0 auto;padding:65px 0;scroll-margin-top:25px}.py-section-heading{text-align:center;margin-bottom:35px}.py-section-heading>span{color:var(--py-orange);letter-spacing:1.5px;font:600 11px IBM Plex Mono,monospace}.py-section-heading h2{margin:12px 0 8px;font-size:clamp(27px,3.5vw,39px);font-weight:800}.py-section-heading p{color:#aa9e8b;margin:0;font-size:15px}.py-level-grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.py-level-card{border:1px solid var(--py-line);background:linear-gradient(145deg,#2e2213f0,#17140ff2);border-radius:14px;padding:25px;transition:transform .25s,border-color .25s,box-shadow .25s}.py-level-card:hover{border-color:#ffb54780;transform:translateY(-6px);box-shadow:0 15px 35px #0003}.py-level-top{justify-content:space-between;align-items:center;display:flex}.py-level-top>span{color:var(--py-orange);font:700 32px IBM Plex Mono,monospace}.py-level-top small{color:#aa987c;letter-spacing:1px;font:10px IBM Plex Mono,monospace}.py-level-card h3{margin:15px 0 7px;font-size:21px}.py-level-card>p,.py-challenge p{color:#c0b29c;font-size:14px;line-height:1.8}.py-topic-list{flex-wrap:wrap;gap:7px;margin:18px 0;display:flex}.py-topic-list span{color:#e9d4ae;background:#ffb5470b;border:1px solid #ffb5472b;border-radius:6px;padding:6px 9px;font-size:11px}.py-challenge{border-right:2px solid var(--py-orange);background:#ffb54711;padding:13px}.py-challenge b{color:var(--py-orange);align-items:center;gap:7px;font-size:13px;display:flex}.py-challenge p{margin:5px 0 0}.py-project{color:#83caff;align-items:center;gap:7px;margin-top:17px;font-size:13px;display:flex}.py-learning-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}.py-lesson-list,.py-lesson-content{border:1px solid var(--py-line);background:var(--py-panel);border-radius:14px;overflow:hidden}.py-lesson-list{padding:9px}.py-list-heading{color:#f6ead5;justify-content:space-between;padding:14px 12px;font-size:14px;display:flex}.py-list-heading small{color:var(--py-orange);font:12px IBM Plex Mono,monospace}.py-lesson-item{color:#fff4df;text-align:right;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:11px;width:100%;margin-bottom:3px;padding:13px 10px;transition:all .2s;display:flex}.py-lesson-item:hover{background:#ffffff0b}.py-lesson-item.active{background:#ffb54717;border-color:#ffb54752}.py-lesson-number{color:#b9ad9c;background:#ffffff0e;border-radius:8px;flex:0 0 34px;place-items:center;height:34px;font:12px IBM Plex Mono,monospace;display:grid}.py-lesson-item.active .py-lesson-number{background:var(--py-orange);color:#1c1307}.py-lesson-item.is-done .py-lesson-number{color:var(--py-orange)}.py-lesson-item.active.is-done .py-lesson-number{color:#1c1307}.py-lesson-info{flex-direction:column;gap:4px;min-width:0;display:flex}.py-lesson-info strong{font-size:12px}.py-lesson-info small{color:#a3947c;font-size:10px}.py-lesson-arrow{color:#a3947c;margin-right:auto}.py-lesson-content{padding:29px}.py-lesson-kicker{color:var(--py-orange);letter-spacing:1px;justify-content:space-between;font:10px IBM Plex Mono,monospace;display:flex}.py-lesson-kicker span:last-child{color:#a3947c}.py-lesson-content h3{margin:15px 0;font-size:27px}.py-explanation{color:#c4b7a2;font-size:15px;line-height:2}.py-lesson-content h4{margin:25px 0 10px;font-size:16px}.py-points{grid-template-columns:1fr 1fr;gap:10px 20px;padding:0;list-style:none;display:grid}.py-points li{color:#d1c4af;font-size:13px;line-height:1.8}.py-points li:before{content:"✦";color:var(--py-orange);margin-left:9px}.py-example{background:#100e0a;border:1px solid #ffffff17;border-radius:10px;margin-top:23px;overflow:hidden}.py-example-heading,.py-editor-heading,.py-preview-heading{border-bottom:1px solid var(--py-line);color:#f6ead5;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;display:flex}.py-example-heading span:last-child,.py-editor-heading span:last-child,.py-preview-heading span:last-child{color:var(--py-orange);font:10px IBM Plex Mono,monospace}.py-example pre{text-align:left;color:#ffd28b;white-space:pre-wrap;direction:ltr;margin:0;padding:18px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.py-task{background:#ffb54711;border:1px solid #ffb5472e;border-radius:9px;margin-top:18px;padding:15px}.py-task b{color:var(--py-orange);font-size:13px}.py-task p{color:#d1c4af;margin:5px 0 0;font-size:13px;line-height:1.8}.py-lesson-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.py-complete-btn{color:#1c1307;background:var(--py-orange)}.py-next-btn{color:#fff4df;border-color:var(--py-line);background:#30271a}.py-lab{grid-template-columns:1fr 1fr;gap:16px;display:grid}.py-editor,.py-preview{border:1px solid var(--py-line);background:#211b12;border-radius:13px;min-width:0;overflow:hidden}.py-editor-heading,.py-preview-heading{background:#ffffff09}.py-editor-heading span:first-child,.py-preview-heading span:first-child{align-items:center;gap:8px;display:inline-flex}.py-editor-heading svg,.py-preview-heading svg{color:var(--py-orange)}.py-editor textarea{resize:vertical;color:#ffdb9a;text-align:left;tab-size:4;direction:ltr;background:#100e0a;border:0;outline:0;width:100%;min-height:340px;padding:20px;font:13px/1.8 IBM Plex Mono,monospace;display:block}.py-editor-actions{border-top:1px solid var(--py-line);gap:9px;padding:13px;display:flex}.py-run-btn,.py-reset-btn{min-height:39px;font-size:12px}.py-preview iframe{background:#10151b;border:0;width:100%;height:410px;display:block}.py-lab-note{color:#a3947c;text-align:center;margin-top:15px;font-size:12px}.py-quiz-start,.py-quiz-box{border:1px solid var(--py-line);background:var(--py-panel);border-radius:14px;max-width:800px;margin:auto;padding:30px}.py-quiz-start{text-align:center}.py-quiz-icon{width:58px;height:58px;color:var(--py-orange);background:#ffb5471a;border:1px solid #ffb54766;border-radius:16px;place-items:center;margin:0 auto 15px;display:grid}.py-quiz-start h3{margin:0 0 7px;font-size:21px}.py-quiz-start p{color:#aa9e8b;margin:0 0 20px;font-size:14px}.py-question{border-bottom:1px solid var(--py-line);padding:18px 0}.py-question h3{align-items:center;gap:12px;margin:0 0 14px;font-size:16px;display:flex}.py-question h3 span{color:var(--py-orange);font:12px IBM Plex Mono,monospace}.py-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.py-options button{color:#e0d2bb;text-align:right;background:#ffffff06;border:1px solid #ffffff1a;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;font-size:13px;transition:all .2s;display:flex}.py-options button:hover:not(:disabled){border-color:#ffb54780}.py-options button.selected{border-color:var(--py-orange);color:#ffdb9a;background:#ffb5471f}.py-options button.correct{color:#7ce0b0;background:#3ebd831a;border-color:#3ebd83}.py-quiz-box>.py-primary-btn{margin-top:20px}.py-quiz-result{text-align:center;background:#ffb54712;border-radius:10px;margin-top:20px;padding:20px}.py-quiz-result>strong{color:var(--py-orange);font:700 34px IBM Plex Mono,monospace}.py-quiz-result h3{margin-bottom:5px}.py-quiz-result p{color:#c0b29c;font-size:13px}.py-full-course{background:radial-gradient(at 10%,#ffb54726,#0000 50%),#211a10;border:1px solid #ffb54745;border-radius:16px;align-items:center;gap:25px;padding:35px;display:flex}.py-course-symbol{color:#1c1307;background:linear-gradient(135deg,#ffe09a,#ffad36);border-radius:20px;flex:0 0 76px;place-items:center;height:76px;display:grid;box-shadow:0 0 30px #ffb54740}.py-course-info>span{color:var(--py-orange);letter-spacing:1.4px;font:600 10px IBM Plex Mono,monospace}.py-full-course h2{margin:9px 0;font-size:24px}.py-full-course p{color:#c0b29c;margin:0 0 18px;font-size:14px;line-height:1.8}.py-footer{border-top:1px solid var(--py-line);text-align:center;background:#00000026;margin-top:65px;padding:38px 20px}.py-footer strong{color:var(--py-orange);font:700 21px IBM Plex Mono,monospace}.py-footer strong span{color:#fff}.py-footer p{color:#b9ad9c;margin:8px 0 15px;font-size:13px}.py-footer small{color:#a3947c;font:10px IBM Plex Mono,monospace}@media (width<=900px){.py-hero{gap:25px}.py-topbar nav{gap:13px}.py-topbar-status{display:none}.py-learning-layout{grid-template-columns:260px 1fr}.py-lesson-content{padding:22px}.py-progress-section{grid-template-columns:1fr 1fr 1fr}.py-progress-info{grid-column:1/-1}.py-stat{border-right:0}}@media (width<=700px){.py-topbar{flex-wrap:wrap;gap:12px;width:calc(100% - 30px);min-height:70px;padding:14px 0}.py-topbar nav{order:2;justify-content:space-between;gap:8px;width:100%;overflow-x:auto}.py-topbar nav a{white-space:nowrap;font-size:12px}.py-logo{font-size:19px}.py-hero{grid-template-columns:1fr;gap:35px;width:calc(100% - 34px);padding:55px 0 45px}.py-hero h1{font-size:46px}.py-hero-content>p{font-size:15px}.py-hero-meta{gap:13px}.py-visual{min-height:340px}.py-terminal-card{width:94%}.py-terminal-code{padding:17px 12px;font-size:10px}.py-visual-orbit{width:330px;height:330px}.py-visual-orbit-two{width:390px;height:190px}.py-progress-section{grid-template-columns:1fr 1fr 1fr;gap:15px;width:calc(100% - 30px);margin-bottom:40px;padding:20px 12px}.py-progress-info{grid-column:1/-1}.py-stat strong{font-size:21px}.py-stat span{text-align:center;font-size:10px}.py-section{width:calc(100% - 30px);padding:45px 0}.py-level-grid,.py-learning-layout{grid-template-columns:1fr}.py-lesson-list{grid-template-columns:1fr 1fr;display:grid}.py-list-heading{grid-column:1/-1}.py-lesson-item{gap:7px;padding:10px 7px}.py-lesson-info strong{font-size:10px}.py-lesson-info small{font-size:9px}.py-lesson-number{flex-basis:29px;height:29px;font-size:10px}.py-lesson-content{padding:19px}.py-lesson-content h3{font-size:23px}.py-points{grid-template-columns:1fr;gap:5px}.py-lab{grid-template-columns:1fr}.py-editor textarea{min-height:270px}.py-preview iframe{height:410px}.py-options{grid-template-columns:1fr}.py-quiz-start,.py-quiz-box{padding:20px}.py-full-course{flex-direction:column;align-items:flex-start;padding:24px}.py-full-course h2{font-size:21px}.py-code-float{opacity:.8}}@media (prefers-reduced-motion:reduce){.py-course *,.py-course :before,.py-course :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.db-course{--db-cyan:#55d9ff;--db-bright:#9ceaff;--db-purple:#a78bfa;--db-bg:#080e18;--db-panel:#0f1927f0;--db-line:#ffffff17;isolation:isolate;background:var(--db-bg);color:#edf6ff;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.db-course *{box-sizing:border-box}.db-course a{color:inherit;text-decoration:none}.db-course button,.db-course textarea{font:inherit}.db-course button{cursor:pointer}.db-course button:disabled{cursor:not-allowed;opacity:.4}.db-background{z-index:-1;pointer-events:none;background:radial-gradient(at 75% 10%,#289bff2b,#0000 34%),radial-gradient(at 5% 48%,#9764ff21,#0000 35%),linear-gradient(#080e18,#0d1727 48%,#080e18);position:absolute;inset:0;overflow:hidden}.db-grid{opacity:.34;background-image:linear-gradient(#55d9ff17 1px,#0000 1px),linear-gradient(90deg,#55d9ff17 1px,#0000 1px);background-size:44px 44px;animation:8s linear infinite db-grid-move;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 92%);mask-image:linear-gradient(#000,#0000 92%)}@keyframes db-grid-move{to{background-position:44px 44px}}.db-glow{filter:blur(95px);opacity:.34;border-radius:50%;width:460px;height:460px;animation:7s ease-in-out infinite alternate db-glow-move;position:absolute}.db-glow-one{background:#168eff;top:5%;right:-180px}.db-glow-two{background:#8655ed;animation-delay:-3s;top:45%;left:-190px}@keyframes db-glow-move{0%{transform:translate(0)scale(.8)}to{transform:translate(-90px,100px)scale(1.25)}}.db-orbit,.db-ring{border:1px solid #55d9ff42;border-radius:50%;animation:13s linear infinite db-orbit-spin;position:absolute;box-shadow:0 0 25px #55d9ff1a}.db-orbit-one{width:420px;height:420px;top:12%;left:10%}.db-orbit-two{border-color:#a78bfa3d;width:570px;height:570px;animation-duration:17s;animation-direction:reverse;top:45%;right:-270px}.db-ring-one{border-radius:30px;width:220px;height:220px;animation-duration:10s;top:55%;left:25%;transform:rotate(35deg)}.db-ring-two{border-color:#a78bfa38;width:280px;height:280px;animation-duration:15s;animation-direction:reverse;top:15%;right:17%}@keyframes db-orbit-spin{to{rotate:360deg}}.db-code-float{color:#55d9ffa6;text-shadow:0 0 18px #55d9ff4d;white-space:nowrap;font:600 clamp(13px,1.6vw,21px) IBM Plex Mono,monospace;animation:5s ease-in-out infinite alternate db-code-float;position:absolute}.db-code-one{top:8%;left:5%}.db-code-two{color:#a78bfabf;animation-delay:-2s;top:21%;right:5%}.db-code-three{animation-delay:-3s;top:38%;left:10%}.db-code-four{color:#a78bfab3;animation-delay:-1s;top:55%;right:8%}.db-code-five{animation-delay:-4s;top:73%;left:4%}.db-code-six{color:#a78bfab3;animation-delay:-2.5s;top:90%;right:10%}@keyframes db-code-float{0%{opacity:.45;transform:translateY(-18px)rotate(-3deg)}to{opacity:1;transform:translateY(24px)rotate(4deg)}}.db-particle{background:var(--db-cyan);width:9px;height:9px;box-shadow:0 0 18px var(--db-cyan);border-radius:50%;animation:2s ease-in-out infinite alternate db-particle-pulse;position:absolute}.db-particle-one{top:15%;left:45%}.db-particle-two{background:var(--db-purple);box-shadow:0 0 18px var(--db-purple);animation-delay:-.7s;top:58%;right:25%}.db-particle-three{background:#7c9dff;animation-delay:-1.3s;top:83%;left:25%;box-shadow:0 0 18px #7c9dff}@keyframes db-particle-pulse{0%{opacity:.5;transform:scale(.6)}to{opacity:1;transform:scale(1.7)}}.db-topbar{z-index:5;border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;gap:20px;width:min(1240px,100% - 48px);min-height:82px;margin:auto;display:flex;position:relative}.db-logo{letter-spacing:-1px;white-space:nowrap;align-items:center;gap:10px;font:700 21px IBM Plex Mono,monospace;display:inline-flex}.db-logo-icon{color:var(--db-cyan);filter:drop-shadow(0 0 10px #55d9ffa6);place-items:center;display:grid}.db-logo-dot{color:var(--db-cyan)}.db-topbar nav{align-items:center;gap:25px;display:flex}.db-topbar nav a{color:#aab8ca;font-size:14px;transition:color .2s}.db-topbar nav a:hover{color:var(--db-cyan)}.db-topbar-status{color:var(--db-cyan);letter-spacing:1px;white-space:nowrap;font:500 10px IBM Plex Mono,monospace}.db-topbar-status i{background:var(--db-cyan);width:7px;height:7px;box-shadow:0 0 12px var(--db-cyan);border-radius:50%;margin-left:6px;display:inline-block}.db-hero{grid-template-columns:1fr 1fr;align-items:center;gap:45px;width:min(1240px,100% - 48px);min-height:610px;margin:auto;padding:65px 0 80px;display:grid}.db-eyebrow{color:var(--db-bright);letter-spacing:1px;background:#55d9ff12;border:1px solid #55d9ff4d;border-radius:30px;align-items:center;gap:10px;padding:10px 15px;font:600 10px IBM Plex Mono,monospace;display:inline-flex}.db-live-dot{background:var(--db-cyan);width:8px;height:8px;box-shadow:0 0 12px var(--db-cyan);border-radius:50%;animation:1s ease-in-out infinite alternate db-particle-pulse}.db-hero h1{letter-spacing:-1.5px;margin:27px 0 18px;font-size:clamp(43px,5.2vw,68px);font-weight:900;line-height:1.3}.db-hero h1 strong{color:var(--db-cyan);text-shadow:0 0 35px #55d9ff59}.db-hero-content>p{color:#aabbd0;max-width:560px;margin:0;font-size:17px;line-height:2}.db-hero-actions{flex-wrap:wrap;gap:13px;margin-top:30px;display:flex}.db-primary-btn,.db-secondary-btn,.db-complete-btn,.db-next-btn,.db-run-btn,.db-reset-btn{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 20px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.db-primary-btn,.db-run-btn{color:#07131e;background:linear-gradient(120deg,#a5edff,#45c8f5);box-shadow:0 8px 28px #55d9ff33}.db-primary-btn:hover,.db-run-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #55d9ff59}.db-secondary-btn,.db-reset-btn{color:#edf6ff;background:#ffffff09;border-color:#ffffff24}.db-secondary-btn:hover,.db-reset-btn:hover{border-color:var(--db-cyan)}.db-hero-meta{color:#9eafc4;flex-wrap:wrap;gap:23px;margin-top:35px;font-size:13px;display:flex}.db-hero-meta span{align-items:center;gap:7px;display:inline-flex}.db-hero-meta svg{color:var(--db-cyan)}.db-visual{place-items:center;min-height:440px;display:grid;position:relative}.db-database-card{z-index:3;background:#0a131ff5;border:1px solid #55d9ff52;border-radius:16px;width:min(100%,455px);position:relative;overflow:hidden;transform:perspective(1000px)rotateY(-5deg)rotateX(2deg);box-shadow:0 25px 90px #00000080,0 0 50px #55d9ff1f}.db-card-top,.db-card-bottom{color:#9cb2c8;justify-content:space-between;align-items:center;padding:16px 19px;font:10px IBM Plex Mono,monospace;display:flex}.db-card-top{border-bottom:1px solid var(--db-line)}.db-live-label{color:var(--db-cyan)}.db-table-preview{padding:22px 19px}.db-table-title{color:var(--db-cyan);align-items:center;gap:8px;margin-bottom:15px;font:600 13px IBM Plex Mono,monospace;display:flex}.db-table-row{color:#d4e5f5;border-bottom:1px solid #ffffff12;grid-template-columns:.6fr 1.5fr .6fr;padding:12px 10px;font:11px IBM Plex Mono,monospace;display:grid}.db-table-head{color:var(--db-cyan);background:#55d9ff17}.db-card-bottom{border-top:1px solid var(--db-line);background:#55d9ff09}.db-card-bottom span:first-child{color:var(--db-cyan);align-items:center;gap:7px;display:flex}.db-visual-orbit{border:1px solid #55d9ff4d;border-radius:50%;width:450px;height:190px;animation:12s linear infinite db-orbit-spin;position:absolute;transform:rotate(-28deg)}.db-visual-orbit-two{border-color:#a78bfa45;width:550px;height:245px;animation-duration:16s;animation-direction:reverse;transform:rotate(35deg)}.db-floating-icon{z-index:4;width:60px;height:60px;color:var(--db-cyan);background:#102330;border:1px solid #55d9ff73;border-radius:16px;place-items:center;animation:4s ease-in-out infinite alternate db-code-float;display:grid;position:absolute;box-shadow:0 0 30px #55d9ff33}.db-icon-table{top:4%;right:5%}.db-icon-server{color:var(--db-purple);background:#1c1830;border-color:#a78bfa73;animation-delay:-2s;bottom:6%;left:4%}.db-floating-label{z-index:4;color:var(--db-cyan);letter-spacing:1px;background:#102330;border:1px solid #55d9ff4d;border-radius:7px;padding:9px 13px;font:9px IBM Plex Mono,monospace;position:absolute;bottom:12%;right:3%}.db-progress-section{border:1px solid var(--db-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff06;border-radius:14px;grid-template-columns:2fr repeat(3,1fr);align-items:center;gap:25px;width:min(1100px,100% - 48px);margin:0 auto 65px;padding:25px;display:grid}.db-progress-info>div:first-child{color:#aabbd0;justify-content:space-between;font-size:13px;display:flex}.db-progress-info strong{color:var(--db-cyan);font:700 17px IBM Plex Mono,monospace}.db-progress-track{background:#ffffff17;border-radius:10px;height:7px;margin:12px 0 8px;overflow:hidden}.db-progress-track>div{border-radius:inherit;background:linear-gradient(90deg,#795cf4,#55d9ff);height:100%;transition:width .4s;box-shadow:0 0 15px #55d9ff66}.db-progress-info small{color:#8da1b8;font-size:11px}.db-stat{border-right:1px solid var(--db-line);flex-direction:column;align-items:center;gap:6px;display:flex}.db-stat strong{color:var(--db-cyan);font:700 25px IBM Plex Mono,monospace}.db-stat span{color:#9eafc4;font-size:12px}.db-section{width:min(1180px,100% - 48px);margin:0 auto;padding:65px 0;scroll-margin-top:25px}.db-section-heading{text-align:center;margin-bottom:35px}.db-section-heading>span{color:var(--db-cyan);letter-spacing:1.5px;font:600 11px IBM Plex Mono,monospace}.db-section-heading h2{margin:12px 0 8px;font-size:clamp(27px,3.5vw,39px);font-weight:800}.db-section-heading p{color:#9eafc4;margin:0;font-size:15px}.db-level-grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.db-level-card{border:1px solid var(--db-line);background:linear-gradient(145deg,#162539f0,#0c1421f2);border-radius:14px;padding:25px;transition:transform .25s,border-color .25s,box-shadow .25s}.db-level-card:hover{border-color:#55d9ff80;transform:translateY(-6px);box-shadow:0 15px 35px #0003}.db-level-top{justify-content:space-between;align-items:center;display:flex}.db-level-top>span{color:var(--db-cyan);font:700 32px IBM Plex Mono,monospace}.db-level-top small{color:#8fa8c4;letter-spacing:1px;font:10px IBM Plex Mono,monospace}.db-level-card h3{margin:15px 0 7px;font-size:21px}.db-level-card>p,.db-challenge p{color:#aebed0;font-size:14px;line-height:1.8}.db-topic-list{flex-wrap:wrap;gap:7px;margin:18px 0;display:flex}.db-topic-list span{color:#c2e8f6;background:#55d9ff0b;border:1px solid #55d9ff29;border-radius:6px;padding:6px 9px;font-size:11px}.db-challenge{border-right:2px solid var(--db-cyan);background:#55d9ff0f;padding:13px}.db-challenge b{color:var(--db-cyan);align-items:center;gap:7px;font-size:13px;display:flex}.db-challenge p{margin:5px 0 0}.db-project{color:#b4a3ff;align-items:center;gap:7px;margin-top:17px;font-size:13px;display:flex}.db-learning-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}.db-lesson-list,.db-lesson-content{border:1px solid var(--db-line);background:var(--db-panel);border-radius:14px;overflow:hidden}.db-lesson-list{padding:9px}.db-list-heading{color:#e1efff;justify-content:space-between;padding:14px 12px;font-size:14px;display:flex}.db-list-heading small{color:var(--db-cyan);font:12px IBM Plex Mono,monospace}.db-lesson-item{color:#edf6ff;text-align:right;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:11px;width:100%;margin-bottom:3px;padding:13px 10px;transition:all .2s;display:flex}.db-lesson-item:hover{background:#ffffff0b}.db-lesson-item.active{background:#55d9ff17;border-color:#55d9ff4d}.db-lesson-number{color:#aabbd0;background:#ffffff0e;border-radius:8px;flex:0 0 34px;place-items:center;height:34px;font:12px IBM Plex Mono,monospace;display:grid}.db-lesson-item.active .db-lesson-number{background:var(--db-cyan);color:#07131e}.db-lesson-item.is-done .db-lesson-number{color:var(--db-cyan)}.db-lesson-item.active.is-done .db-lesson-number{color:#07131e}.db-lesson-info{flex-direction:column;gap:4px;min-width:0;display:flex}.db-lesson-info strong{font-size:12px}.db-lesson-info small{color:#8da1b8;font-size:10px}.db-lesson-arrow{color:#8da1b8;margin-right:auto}.db-lesson-content{padding:29px}.db-lesson-kicker{color:var(--db-cyan);letter-spacing:1px;justify-content:space-between;font:10px IBM Plex Mono,monospace;display:flex}.db-lesson-kicker span:last-child{color:#8da1b8}.db-lesson-content h3{margin:15px 0;font-size:27px}.db-explanation{color:#b4c5d8;font-size:15px;line-height:2}.db-lesson-content h4{margin:25px 0 10px;font-size:16px}.db-points{grid-template-columns:1fr 1fr;gap:10px 20px;padding:0;list-style:none;display:grid}.db-points li{color:#c0d1e2;font-size:13px;line-height:1.8}.db-points li:before{content:"✦";color:var(--db-cyan);margin-left:9px}.db-example{background:#080e18;border:1px solid #ffffff17;border-radius:10px;margin-top:23px;overflow:hidden}.db-example-heading,.db-editor-heading,.db-preview-heading{border-bottom:1px solid var(--db-line);color:#e9f4ff;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;display:flex}.db-example-heading span:last-child,.db-editor-heading span:last-child,.db-preview-heading span:last-child{color:var(--db-cyan);font:10px IBM Plex Mono,monospace}.db-example pre{text-align:left;color:#83dcff;white-space:pre-wrap;direction:ltr;margin:0;padding:18px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.db-task{background:#55d9ff11;border:1px solid #55d9ff2e;border-radius:9px;margin-top:18px;padding:15px}.db-task b{color:var(--db-cyan);font-size:13px}.db-task p{color:#c5d5e6;margin:5px 0 0;font-size:13px;line-height:1.8}.db-lesson-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.db-complete-btn{color:#07131e;background:var(--db-cyan)}.db-next-btn{color:#eee;border-color:var(--db-line);background:#202c3d}.db-lab{grid-template-columns:1fr 1fr;gap:16px;display:grid}.db-editor,.db-preview{border:1px solid var(--db-line);background:#101a29;border-radius:13px;min-width:0;overflow:hidden}.db-editor-heading,.db-preview-heading{background:#ffffff09}.db-editor-heading span:first-child,.db-preview-heading span:first-child{align-items:center;gap:8px;display:inline-flex}.db-editor-heading svg,.db-preview-heading svg{color:var(--db-cyan)}.db-editor textarea{resize:vertical;color:#8ce4ff;text-align:left;tab-size:2;direction:ltr;background:#080e18;border:0;outline:0;width:100%;min-height:340px;padding:20px;font:13px/1.8 IBM Plex Mono,monospace;display:block}.db-editor-actions{border-top:1px solid var(--db-line);gap:9px;padding:13px;display:flex}.db-run-btn,.db-reset-btn{min-height:39px;font-size:12px}.db-preview iframe{background:#0d141e;border:0;width:100%;height:410px;display:block}.db-lab-note{color:#8da1b8;text-align:center;margin-top:15px;font-size:12px}.db-quiz-start,.db-quiz-box{border:1px solid var(--db-line);background:var(--db-panel);border-radius:14px;max-width:800px;margin:auto;padding:30px}.db-quiz-start{text-align:center}.db-quiz-icon{width:58px;height:58px;color:var(--db-cyan);background:#55d9ff1a;border:1px solid #55d9ff66;border-radius:16px;place-items:center;margin:0 auto 15px;display:grid}.db-quiz-start h3{margin:0 0 7px;font-size:21px}.db-quiz-start p{color:#9eafc4;margin:0 0 20px;font-size:14px}.db-question{border-bottom:1px solid var(--db-line);padding:18px 0}.db-question h3{align-items:center;gap:12px;margin:0 0 14px;font-size:16px;display:flex}.db-question h3 span{color:var(--db-cyan);font:12px IBM Plex Mono,monospace}.db-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.db-options button{color:#c7d7e8;text-align:right;background:#ffffff06;border:1px solid #ffffff1a;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;font-size:13px;transition:all .2s;display:flex}.db-options button:hover:not(:disabled){border-color:#55d9ff80}.db-options button.selected{border-color:var(--db-cyan);color:#9ceaff;background:#55d9ff1f}.db-options button.correct{color:#7ce0b0;background:#3ebd831a;border-color:#3ebd83}.db-quiz-box>.db-primary-btn{margin-top:20px}.db-quiz-result{text-align:center;background:#55d9ff12;border-radius:10px;margin-top:20px;padding:20px}.db-quiz-result>strong{color:var(--db-cyan);font:700 34px IBM Plex Mono,monospace}.db-quiz-result h3{margin-bottom:5px}.db-quiz-result p{color:#aabbd0;font-size:13px}.db-full-course{background:radial-gradient(at 10%,#55d9ff24,#0000 50%),#111e30;border:1px solid #55d9ff40;border-radius:16px;align-items:center;gap:25px;padding:35px;display:flex}.db-course-symbol{color:#07131e;background:linear-gradient(135deg,#a5edff,#45c8f5);border-radius:20px;flex:0 0 76px;place-items:center;height:76px;display:grid;box-shadow:0 0 30px #55d9ff33}.db-course-info>span{color:var(--db-cyan);letter-spacing:1.4px;font:600 10px IBM Plex Mono,monospace}.db-full-course h2{margin:9px 0;font-size:24px}.db-full-course p{color:#aabbd0;margin:0 0 18px;font-size:14px;line-height:1.8}.db-footer{border-top:1px solid var(--db-line);text-align:center;background:#00000026;margin-top:65px;padding:38px 20px}.db-footer strong{color:var(--db-cyan);font:700 21px IBM Plex Mono,monospace}.db-footer strong span{color:#fff}.db-footer p{color:#aabbd0;margin:8px 0 15px;font-size:13px}.db-footer small{color:#8da1b8;font:10px IBM Plex Mono,monospace}@media (width<=900px){.db-hero{gap:25px}.db-topbar nav{gap:13px}.db-topbar-status{display:none}.db-learning-layout{grid-template-columns:260px 1fr}.db-lesson-content{padding:22px}.db-progress-section{grid-template-columns:1fr 1fr 1fr}.db-progress-info{grid-column:1/-1}.db-stat{border-right:0}}@media (width<=700px){.db-topbar{flex-wrap:wrap;gap:12px;width:calc(100% - 30px);min-height:70px;padding:14px 0}.db-topbar nav{order:2;justify-content:space-between;gap:8px;width:100%;overflow-x:auto}.db-topbar nav a{white-space:nowrap;font-size:12px}.db-logo{font-size:19px}.db-hero{grid-template-columns:1fr;gap:35px;width:calc(100% - 34px);padding:55px 0 45px}.db-hero h1{font-size:46px}.db-hero-content>p{font-size:15px}.db-hero-meta{gap:13px}.db-visual{min-height:340px}.db-database-card{width:94%}.db-visual-orbit{width:330px;height:330px}.db-visual-orbit-two{width:390px;height:190px}.db-progress-section{grid-template-columns:1fr 1fr 1fr;gap:15px;width:calc(100% - 30px);margin-bottom:40px;padding:20px 12px}.db-progress-info{grid-column:1/-1}.db-stat strong{font-size:21px}.db-stat span{text-align:center;font-size:10px}.db-section{width:calc(100% - 30px);padding:45px 0}.db-level-grid,.db-learning-layout{grid-template-columns:1fr}.db-lesson-list{grid-template-columns:1fr 1fr;display:grid}.db-list-heading{grid-column:1/-1}.db-lesson-item{gap:7px;padding:10px 7px}.db-lesson-info strong{font-size:10px}.db-lesson-info small{font-size:9px}.db-lesson-number{flex-basis:29px;height:29px;font-size:10px}.db-lesson-content{padding:19px}.db-lesson-content h3{font-size:23px}.db-points{grid-template-columns:1fr;gap:5px}.db-lab{grid-template-columns:1fr}.db-editor textarea{min-height:270px}.db-preview iframe{height:410px}.db-options{grid-template-columns:1fr}.db-quiz-start,.db-quiz-box{padding:20px}.db-full-course{flex-direction:column;align-items:flex-start;padding:24px}.db-full-course h2{font-size:21px}.db-code-float{opacity:.8}}@media (prefers-reduced-motion:reduce){.db-course *,.db-course :before,.db-course :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.cyber-course{--cyber-green:#43f5a1;--cyber-bright:#9affc9;--cyber-red:#ff5368;--cyber-purple:#a78bfa;--cyber-bg:#080e11;--cyber-panel:#0e1a1bf5;--cyber-line:#ffffff17;isolation:isolate;background:var(--cyber-bg);color:#edfff6;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.cyber-course *{box-sizing:border-box}.cyber-course a{color:inherit;text-decoration:none}.cyber-course button{font:inherit;cursor:pointer}.cyber-course button:disabled{cursor:not-allowed;opacity:.4}.cyber-background{z-index:-1;pointer-events:none;background:radial-gradient(at 80% 12%,#18b46829,#0000 34%),radial-gradient(at 5% 48%,#00a58521,#0000 35%),linear-gradient(#080e11,#0b1918 48%,#080e11);position:absolute;inset:0;overflow:hidden}.cyber-grid{opacity:.4;background-image:linear-gradient(#43f5a116 1px,#0000 1px),linear-gradient(90deg,#43f5a116 1px,#0000 1px);background-size:42px 42px;animation:7s linear infinite cyber-grid-move;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 94%);mask-image:linear-gradient(#000,#0000 94%)}@keyframes cyber-grid-move{to{background-position:42px 42px}}.cyber-glow{filter:blur(100px);opacity:.28;border-radius:50%;width:450px;height:450px;animation:6s ease-in-out infinite alternate cyber-glow-move;position:absolute}.cyber-glow-one{background:#00c77a;top:4%;right:-180px}.cyber-glow-two{background:#087d9a;animation-delay:-3s;top:48%;left:-180px}@keyframes cyber-glow-move{0%{transform:translate(0)scale(.8)}to{transform:translate(-85px,95px)scale(1.25)}}.cyber-scan-line{opacity:.24;background:linear-gradient(#0000,#43f5a133,#0000);width:100%;height:100px;animation:5s linear infinite cyber-scan;position:absolute;top:-20%;left:0}@keyframes cyber-scan{to{top:110%}}.cyber-circle{border:1px solid #43f5a140;border-radius:50%;animation:4s ease-in-out infinite alternate cyber-circle-pulse;position:absolute;box-shadow:0 0 25px #43f5a114}.cyber-circle-one{width:390px;height:390px;top:16%;left:7%}.cyber-circle-two{border-color:#ff536840;width:270px;height:270px;animation-delay:-2s;top:55%;right:-100px}@keyframes cyber-circle-pulse{0%{opacity:.35;transform:scale(.88)rotate(0)}to{opacity:.85;transform:scale(1.12)rotate(20deg)}}.cyber-hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border:1px solid #43f5a13d;width:130px;height:150px;animation:5s ease-in-out infinite alternate cyber-hex-float;position:absolute}.cyber-hex-one{top:35%;right:15%}.cyber-hex-two{border-color:#ff53683b;animation-delay:-2.5s;top:70%;left:20%}@keyframes cyber-hex-float{0%{transform:translateY(-20px)rotate(0)}to{transform:translateY(25px)rotate(25deg)}}.cyber-floating-code{color:#43f5a19e;text-shadow:0 0 18px #43f5a14d;white-space:nowrap;font:600 clamp(12px,1.5vw,19px) IBM Plex Mono,monospace;animation:5s ease-in-out infinite alternate cyber-code-float;position:absolute}.cyber-code-one{top:9%;left:5%}.cyber-code-two{color:#ff5368b3;animation-delay:-2s;top:22%;right:5%}.cyber-code-three{animation-delay:-3s;top:42%;left:8%}.cyber-code-four{color:#ff5368b3;animation-delay:-1s;top:61%;right:5%}.cyber-code-five{animation-delay:-2.5s;top:85%;left:7%}@keyframes cyber-code-float{0%{opacity:.4;transform:translateY(-17px)rotate(-3deg)}to{opacity:1;transform:translateY(23px)rotate(3deg)}}.cyber-particle{background:var(--cyber-green);width:8px;height:8px;box-shadow:0 0 18px var(--cyber-green);border-radius:50%;animation:1.8s ease-in-out infinite alternate cyber-particle-pulse;position:absolute}.cyber-particle-one{top:15%;left:43%}.cyber-particle-two{background:var(--cyber-red);box-shadow:0 0 18px var(--cyber-red);animation-delay:-.6s;top:48%;right:24%}.cyber-particle-three{animation-delay:-1s;top:77%;left:30%}.cyber-particle-four{background:#4ba5ff;animation-delay:-1.4s;top:90%;right:12%;box-shadow:0 0 18px #4ba5ff}@keyframes cyber-particle-pulse{0%{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1.8)}}.cyber-topbar{z-index:5;border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;gap:20px;width:min(1240px,100% - 48px);min-height:82px;margin:auto;display:flex;position:relative}.cyber-logo{letter-spacing:-1px;white-space:nowrap;align-items:center;gap:10px;font:700 21px IBM Plex Mono,monospace;display:inline-flex}.cyber-logo-icon{color:var(--cyber-green);filter:drop-shadow(0 0 10px #43f5a1a6);place-items:center;display:grid}.cyber-logo-dot{color:var(--cyber-green)}.cyber-topbar nav{align-items:center;gap:25px;display:flex}.cyber-topbar nav a{color:#aabeb4;font-size:14px;transition:color .2s}.cyber-topbar nav a:hover{color:var(--cyber-green)}.cyber-status{color:var(--cyber-green);letter-spacing:1px;white-space:nowrap;font:500 10px IBM Plex Mono,monospace}.cyber-status i{background:var(--cyber-green);width:7px;height:7px;box-shadow:0 0 12px var(--cyber-green);border-radius:50%;margin-left:6px;display:inline-block}.cyber-hero{grid-template-columns:1fr 1fr;align-items:center;gap:45px;width:min(1240px,100% - 48px);min-height:610px;margin:auto;padding:65px 0 80px;display:grid}.cyber-eyebrow{color:var(--cyber-bright);letter-spacing:1px;background:#43f5a112;border:1px solid #43f5a14d;border-radius:30px;align-items:center;gap:10px;padding:10px 15px;font:600 10px IBM Plex Mono,monospace;display:inline-flex}.cyber-live-dot{background:var(--cyber-green);width:8px;height:8px;box-shadow:0 0 12px var(--cyber-green);border-radius:50%;animation:1s ease-in-out infinite alternate cyber-particle-pulse}.cyber-hero h1{letter-spacing:-1.5px;margin:27px 0 18px;font-size:clamp(43px,5.2vw,68px);font-weight:900;line-height:1.3}.cyber-hero h1 strong{color:var(--cyber-green);text-shadow:0 0 35px #43f5a14d}.cyber-hero-content>p{color:#a9beb3;max-width:560px;margin:0;font-size:17px;line-height:2}.cyber-hero-actions{flex-wrap:wrap;gap:13px;margin-top:30px;display:flex}.cyber-primary-btn,.cyber-secondary-btn,.cyber-complete-btn,.cyber-next-btn{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 20px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.cyber-primary-btn{color:#07150e;background:linear-gradient(120deg,#9bffc9,#43e89a);box-shadow:0 8px 28px #43f5a130}.cyber-primary-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #43f5a157}.cyber-secondary-btn,.cyber-next-btn{color:#edfff6;background:#ffffff09;border-color:#ffffff24}.cyber-secondary-btn:hover,.cyber-next-btn:hover{border-color:var(--cyber-green)}.cyber-hero-meta{color:#9fb4a9;flex-wrap:wrap;gap:23px;margin-top:35px;font-size:13px;display:flex}.cyber-hero-meta span{align-items:center;gap:7px;display:inline-flex}.cyber-hero-meta svg{color:var(--cyber-green)}.cyber-visual{place-items:center;min-height:440px;display:grid;position:relative}.cyber-shield-card{z-index:3;background:#081312f7;border:1px solid #43f5a152;border-radius:16px;width:min(100%,455px);position:relative;overflow:hidden;transform:perspective(1000px)rotateY(-5deg)rotateX(2deg);box-shadow:0 25px 90px #00000080,0 0 50px #43f5a11f}.cyber-card-top,.cyber-card-bottom{color:#9cb5a7;justify-content:space-between;align-items:center;padding:16px 19px;font:10px IBM Plex Mono,monospace;display:flex}.cyber-card-top{border-bottom:1px solid var(--cyber-line)}.cyber-connected{color:var(--cyber-green)}.cyber-shield-main{background:radial-gradient(#43f5a11a,#0000 70%);flex-direction:column;align-items:center;padding:25px 15px 22px;display:flex}.cyber-shield-icon{width:110px;height:110px;color:var(--cyber-green);filter:drop-shadow(0 0 17px #43f5a173);place-items:center;animation:2s ease-in-out infinite alternate cyber-shield-pulse;display:grid;position:relative}@keyframes cyber-shield-pulse{0%{transform:scale(.94)}to{transform:scale(1.07)}}.cyber-shield-check{font-size:36px;font-weight:900;position:absolute}.cyber-shield-main strong{color:var(--cyber-green);letter-spacing:1px;margin-top:12px;font:700 15px IBM Plex Mono,monospace}.cyber-shield-main small{color:#829d8e;margin-top:7px;font:9px IBM Plex Mono,monospace}.cyber-security-list{padding:0 20px 18px}.cyber-security-list>div{color:#bdcfc3;border-top:1px solid #ffffff12;align-items:center;gap:10px;padding:11px 0;font:10px IBM Plex Mono,monospace;display:flex}.cyber-security-list svg{color:var(--cyber-green)}.cyber-security-list b{color:var(--cyber-green);margin-right:auto;font-size:9px}.cyber-card-bottom{border-top:1px solid var(--cyber-line);background:#43f5a109}.cyber-card-bottom span:last-child{color:var(--cyber-green)}.cyber-visual-orbit{border:1px solid #43f5a14d;border-radius:50%;width:450px;height:190px;animation:12s linear infinite cyber-orbit-spin;position:absolute;transform:rotate(-28deg)}.cyber-visual-orbit-two{border-color:#ff536840;width:550px;height:245px;animation-duration:16s;animation-direction:reverse;transform:rotate(35deg)}@keyframes cyber-orbit-spin{to{rotate:360deg}}.cyber-floating-icon{z-index:4;width:58px;height:58px;color:var(--cyber-green);background:#10241b;border:1px solid #43f5a173;border-radius:15px;place-items:center;animation:4s ease-in-out infinite alternate cyber-code-float;display:grid;position:absolute;box-shadow:0 0 30px #43f5a133}.cyber-icon-lock{top:5%;right:5%}.cyber-icon-scan{color:var(--cyber-red);background:#27151b;border-color:#ff536873;animation-delay:-2s;bottom:7%;left:5%}.cyber-floating-label{z-index:4;color:var(--cyber-green);letter-spacing:1px;background:#10241b;border:1px solid #43f5a14d;border-radius:7px;padding:9px 13px;font:9px IBM Plex Mono,monospace;position:absolute;bottom:12%;right:3%}.cyber-progress-section{border:1px solid var(--cyber-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff06;border-radius:14px;grid-template-columns:2fr repeat(3,1fr);align-items:center;gap:25px;width:min(1100px,100% - 48px);margin:0 auto 65px;padding:25px;display:grid}.cyber-progress-info>div:first-child{color:#aabeb4;justify-content:space-between;font-size:13px;display:flex}.cyber-progress-info strong{color:var(--cyber-green);font:700 17px IBM Plex Mono,monospace}.cyber-progress-track{background:#ffffff17;border-radius:10px;height:7px;margin:12px 0 8px;overflow:hidden}.cyber-progress-track>div{border-radius:inherit;background:linear-gradient(90deg,#13a96c,#43f5a1);height:100%;transition:width .4s;box-shadow:0 0 15px #43f5a166}.cyber-progress-info small{color:#8da79a;font-size:11px}.cyber-stat{border-right:1px solid var(--cyber-line);flex-direction:column;align-items:center;gap:6px;display:flex}.cyber-stat strong{color:var(--cyber-green);font:700 25px IBM Plex Mono,monospace}.cyber-stat span{color:#9eafc4;font-size:12px}.cyber-section{width:min(1180px,100% - 48px);margin:0 auto;padding:65px 0;scroll-margin-top:25px}.cyber-section-heading{text-align:center;margin-bottom:35px}.cyber-section-heading>span{color:var(--cyber-green);letter-spacing:1.5px;font:600 11px IBM Plex Mono,monospace}.cyber-section-heading h2{margin:12px 0 8px;font-size:clamp(27px,3.5vw,39px);font-weight:800}.cyber-section-heading p{color:#9eafa5;margin:0;font-size:15px}.cyber-level-grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.cyber-level-card{border:1px solid var(--cyber-line);background:linear-gradient(145deg,#14271ff2,#0a1513f5);border-radius:14px;padding:25px;transition:transform .25s,border-color .25s,box-shadow .25s}.cyber-level-card:hover{border-color:#43f5a180;transform:translateY(-6px);box-shadow:0 15px 35px #0003}.cyber-level-top{justify-content:space-between;align-items:center;display:flex}.cyber-level-top>span{color:var(--cyber-green);font:700 32px IBM Plex Mono,monospace}.cyber-level-top small{color:#91ad9d;letter-spacing:1px;font:10px IBM Plex Mono,monospace}.cyber-level-card h3{margin:15px 0 7px;font-size:21px}.cyber-level-card>p,.cyber-challenge p{color:#afc3b6;font-size:14px;line-height:1.8}.cyber-topic-list{flex-wrap:wrap;gap:7px;margin:18px 0;display:flex}.cyber-topic-list span{color:#c4f4d8;background:#43f5a10b;border:1px solid #43f5a129;border-radius:6px;padding:6px 9px;font-size:11px}.cyber-challenge{border-right:2px solid var(--cyber-green);background:#43f5a10f;padding:13px}.cyber-challenge b{color:var(--cyber-green);align-items:center;gap:7px;font-size:13px;display:flex}.cyber-challenge p{margin:5px 0 0}.cyber-project{color:#a9a2ff;align-items:center;gap:7px;margin-top:17px;font-size:13px;display:flex}.cyber-learning-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}.cyber-lesson-list,.cyber-lesson-content{border:1px solid var(--cyber-line);background:var(--cyber-panel);border-radius:14px;overflow:hidden}.cyber-lesson-list{padding:9px}.cyber-list-heading{color:#e1fff0;justify-content:space-between;padding:14px 12px;font-size:14px;display:flex}.cyber-list-heading small{color:var(--cyber-green);font:12px IBM Plex Mono,monospace}.cyber-lesson-item{color:#edfff6;text-align:right;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:11px;width:100%;margin-bottom:3px;padding:13px 10px;transition:all .2s;display:flex}.cyber-lesson-item:hover{background:#ffffff0b}.cyber-lesson-item.active{background:#43f5a117;border-color:#43f5a14d}.cyber-lesson-number{color:#aabeb4;background:#ffffff0e;border-radius:8px;flex:0 0 34px;place-items:center;height:34px;font:12px IBM Plex Mono,monospace;display:grid}.cyber-lesson-item.active .cyber-lesson-number{background:var(--cyber-green);color:#07150e}.cyber-lesson-item.is-done .cyber-lesson-number{color:var(--cyber-green)}.cyber-lesson-item.active.is-done .cyber-lesson-number{color:#07150e}.cyber-lesson-info{flex-direction:column;gap:4px;min-width:0;display:flex}.cyber-lesson-info strong{font-size:12px}.cyber-lesson-info small{color:#8da79a;font-size:10px}.cyber-lesson-arrow{color:#8da79a;margin-right:auto}.cyber-lesson-content{padding:29px}.cyber-lesson-kicker{color:var(--cyber-green);letter-spacing:1px;justify-content:space-between;font:10px IBM Plex Mono,monospace;display:flex}.cyber-lesson-kicker span:last-child{color:#8da79a}.cyber-lesson-content h3{margin:15px 0;font-size:27px}.cyber-explanation{color:#b4c9bc;font-size:15px;line-height:2}.cyber-lesson-content h4{margin:25px 0 10px;font-size:16px}.cyber-points{grid-template-columns:1fr 1fr;gap:10px 20px;padding:0;list-style:none;display:grid}.cyber-points li{color:#c0d5c8;font-size:13px;line-height:1.8}.cyber-points li:before{content:"✦";color:var(--cyber-green);margin-left:9px}.cyber-example{background:#080e11;border:1px solid #ffffff17;border-radius:10px;margin-top:23px;overflow:hidden}.cyber-example-heading{border-bottom:1px solid var(--cyber-line);color:#e9fff1;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;display:flex}.cyber-example-heading span:last-child{color:var(--cyber-green);font:10px IBM Plex Mono,monospace}.cyber-example pre{text-align:left;color:#83eab1;white-space:pre-wrap;direction:ltr;margin:0;padding:18px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.cyber-task{background:#43f5a111;border:1px solid #43f5a12e;border-radius:9px;margin-top:18px;padding:15px}.cyber-task b{color:var(--cyber-green);font-size:13px}.cyber-task p{color:#c5d9cc;margin:5px 0 0;font-size:13px;line-height:1.8}.cyber-lesson-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.cyber-complete-btn{color:#07150e;background:var(--cyber-green)}.cyber-next-btn{color:#eee;border-color:var(--cyber-line);background:#202c3d}.cyber-lab-intro{background:#43f5a10b;border:1px solid #43f5a133;border-radius:13px;align-items:center;gap:17px;margin-bottom:20px;padding:20px;display:flex}.cyber-lab-icon{height:55px;color:var(--cyber-green);background:#43f5a11f;border-radius:14px;flex:0 0 55px;place-items:center;display:grid}.cyber-lab-intro h3{margin:0 0 6px;font-size:17px}.cyber-lab-intro p{color:#a9beb3;margin:0;font-size:13px;line-height:1.8}.cyber-scenario-grid{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.cyber-scenario-card{border:1px solid var(--cyber-line);background:linear-gradient(145deg,#13221df7,#0a1313f7);border-radius:13px;padding:21px}.cyber-scenario-heading{color:var(--cyber-red);justify-content:space-between;align-items:center;display:flex}.cyber-scenario-heading span{letter-spacing:1px;font:10px IBM Plex Mono,monospace}.cyber-scenario-card h3{margin:17px 0 8px;font-size:18px}.cyber-scenario-card>p{color:#aec1b5;min-height:82px;margin:0;font-size:13px;line-height:1.9}.cyber-clues{background:#ffffff09;border-radius:8px;flex-direction:column;gap:9px;margin-top:15px;padding:13px;display:flex}.cyber-clues strong{color:var(--cyber-green);margin-bottom:3px;font-size:12px}.cyber-clues span{color:#b8cbbf;align-items:center;gap:7px;font-size:11px;display:flex}.cyber-clues svg{color:var(--cyber-green)}.cyber-scenario-options{grid-template-columns:1fr 1fr;gap:8px;margin-top:15px;display:grid}.cyber-scenario-options button{color:#cbd9d0;background:#ffffff09;border:1px solid #ffffff1f;border-radius:7px;justify-content:center;align-items:center;gap:6px;min-height:42px;padding:7px;font-size:11px;transition:all .2s;display:flex}.cyber-scenario-options button:hover:not(:disabled){border-color:var(--cyber-green)}.cyber-scenario-options button.selected.danger{border-color:var(--cyber-red);color:#ff9aa8;background:#ff53681f}.cyber-scenario-options button.selected.safe{border-color:var(--cyber-green);color:var(--cyber-bright);background:#43f5a11a}.cyber-scenario-feedback{border-right:2px solid var(--cyber-green);background:#43f5a10f;border-radius:8px;margin-top:12px;padding:12px}.cyber-scenario-feedback b{color:var(--cyber-green);font-size:12px}.cyber-scenario-feedback p{color:#b8cbbf;margin:6px 0 0;font-size:12px;line-height:1.8}.cyber-scenario-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;margin-top:22px;display:flex}.cyber-scenario-actions>p{color:var(--cyber-green);font-weight:800}.cyber-quiz-start,.cyber-quiz-box{border:1px solid var(--cyber-line);background:var(--cyber-panel);border-radius:14px;max-width:800px;margin:auto;padding:30px}.cyber-quiz-start{text-align:center}.cyber-quiz-icon{width:58px;height:58px;color:var(--cyber-green);background:#43f5a11a;border:1px solid #43f5a166;border-radius:16px;place-items:center;margin:0 auto 15px;display:grid}.cyber-quiz-start h3{margin:0 0 7px;font-size:21px}.cyber-quiz-start p{color:#9eafa5;margin:0 0 20px;font-size:14px}.cyber-question{border-bottom:1px solid var(--cyber-line);padding:18px 0}.cyber-question h3{align-items:center;gap:12px;margin:0 0 14px;font-size:16px;display:flex}.cyber-question h3 span{color:var(--cyber-green);font:12px IBM Plex Mono,monospace}.cyber-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.cyber-options button{color:#c7d7ce;text-align:right;background:#ffffff06;border:1px solid #ffffff1a;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;font-size:13px;transition:all .2s;display:flex}.cyber-options button:hover:not(:disabled){border-color:#43f5a180}.cyber-options button.selected{border-color:var(--cyber-green);color:var(--cyber-bright);background:#43f5a11f}.cyber-options button.correct{color:#7ce0b0;background:#3ebd831a;border-color:#3ebd83}.cyber-quiz-box>.cyber-primary-btn{margin-top:20px}.cyber-quiz-result{text-align:center;background:#43f5a112;border-radius:10px;margin-top:20px;padding:20px}.cyber-quiz-result>strong{color:var(--cyber-green);font:700 34px IBM Plex Mono,monospace}.cyber-quiz-result h3{margin-bottom:5px}.cyber-quiz-result p{color:#aabeb4;font-size:13px}.cyber-full-course{background:radial-gradient(at 10%,#43f5a124,#0000 50%),#111e1a;border:1px solid #43f5a140;border-radius:16px;align-items:center;gap:25px;padding:35px;display:flex}.cyber-course-symbol{color:#07150e;background:linear-gradient(135deg,#9bffc9,#43e89a);border-radius:20px;flex:0 0 76px;place-items:center;height:76px;display:grid;box-shadow:0 0 30px #43f5a133}.cyber-course-info>span{color:var(--cyber-green);letter-spacing:1.4px;font:600 10px IBM Plex Mono,monospace}.cyber-full-course h2{margin:9px 0;font-size:24px}.cyber-full-course p{color:#aabeb4;margin:0 0 18px;font-size:14px;line-height:1.8}.cyber-footer{border-top:1px solid var(--cyber-line);text-align:center;background:#00000026;margin-top:65px;padding:38px 20px}.cyber-footer strong{color:var(--cyber-green);font:700 21px IBM Plex Mono,monospace}.cyber-footer strong span{color:#fff}.cyber-footer p{color:#aabeb4;margin:8px 0 15px;font-size:13px}.cyber-footer small{color:#8da79a;font:10px IBM Plex Mono,monospace}@media (width<=900px){.cyber-hero{gap:25px}.cyber-topbar nav{gap:13px}.cyber-status{display:none}.cyber-learning-layout{grid-template-columns:260px 1fr}.cyber-lesson-content{padding:22px}.cyber-progress-section{grid-template-columns:1fr 1fr 1fr}.cyber-progress-info{grid-column:1/-1}.cyber-stat{border-right:0}.cyber-scenario-grid{grid-template-columns:1fr 1fr}}@media (width<=700px){.cyber-topbar{flex-wrap:wrap;gap:12px;width:calc(100% - 30px);min-height:70px;padding:14px 0}.cyber-topbar nav{order:2;justify-content:space-between;gap:8px;width:100%;overflow-x:auto}.cyber-topbar nav a{white-space:nowrap;font-size:12px}.cyber-logo{font-size:19px}.cyber-hero{grid-template-columns:1fr;gap:35px;width:calc(100% - 34px);padding:55px 0 45px}.cyber-hero h1{font-size:43px}.cyber-hero-content>p{font-size:15px}.cyber-hero-meta{gap:13px}.cyber-visual{min-height:340px}.cyber-shield-card{width:94%}.cyber-visual-orbit{width:330px;height:330px}.cyber-visual-orbit-two{width:390px;height:190px}.cyber-progress-section{grid-template-columns:1fr 1fr 1fr;gap:15px;width:calc(100% - 30px);margin-bottom:40px;padding:20px 12px}.cyber-progress-info{grid-column:1/-1}.cyber-stat strong{font-size:21px}.cyber-stat span{text-align:center;font-size:10px}.cyber-section{width:calc(100% - 30px);padding:45px 0}.cyber-level-grid,.cyber-learning-layout{grid-template-columns:1fr}.cyber-lesson-list{grid-template-columns:1fr 1fr;display:grid}.cyber-list-heading{grid-column:1/-1}.cyber-lesson-item{gap:7px;padding:10px 7px}.cyber-lesson-info strong{font-size:10px}.cyber-lesson-info small{font-size:9px}.cyber-lesson-number{flex-basis:29px;height:29px;font-size:10px}.cyber-lesson-content{padding:19px}.cyber-lesson-content h3{font-size:23px}.cyber-points{grid-template-columns:1fr;gap:5px}.cyber-scenario-grid{grid-template-columns:1fr}.cyber-scenario-card>p{min-height:auto}.cyber-options{grid-template-columns:1fr}.cyber-quiz-start,.cyber-quiz-box{padding:20px}.cyber-full-course{flex-direction:column;align-items:flex-start;padding:24px}.cyber-full-course h2{font-size:21px}.cyber-floating-code{opacity:.8}}@media (prefers-reduced-motion:reduce){.cyber-course *,.cyber-course :before,.cyber-course :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.basics-course{--basics-purple:#a78bfa;--basics-blue:#60a5fa;--basics-cyan:#67e8f9;--basics-pink:#f0abfc;--basics-bg:#090817;--basics-panel:#14122bf0;--basics-line:#a78bfa29;isolation:isolate;background:var(--basics-bg);color:#f5f2ff;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.basics-course *{box-sizing:border-box}.basics-course a{color:inherit;text-decoration:none}.basics-course button{font:inherit;cursor:pointer}.basics-course button:disabled{cursor:not-allowed;opacity:.4}.basics-background{z-index:-1;pointer-events:none;background:radial-gradient(at 82% 10%,#7c3aed38,#0000 34%),radial-gradient(at 8% 43%,#2563eb2e,#0000 33%),radial-gradient(at 52% 90%,#c026d31a,#0000 38%),linear-gradient(155deg,#090817,#11102a 50%,#090817);position:absolute;inset:0;overflow:hidden}.basics-grid{opacity:.48;background-image:linear-gradient(#a78bfa13 1px,#0000 1px),linear-gradient(90deg,#a78bfa13 1px,#0000 1px);background-size:44px 44px;animation:6s linear infinite basics-grid-move;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 10%,#0000 95%);mask-image:linear-gradient(#000 10%,#0000 95%)}@keyframes basics-grid-move{to{background-position:44px 44px}}.basics-glow{filter:blur(100px);opacity:.3;border-radius:50%;width:460px;height:460px;animation:5s ease-in-out infinite alternate basics-glow-move;position:absolute}.basics-glow-one{background:#7139ed;top:5%;right:-170px}.basics-glow-two{background:#2563eb;animation-delay:-2.5s;top:43%;left:-180px}@keyframes basics-glow-move{0%{opacity:.2;transform:translate(0)scale(.8)}to{opacity:.42;transform:translate(-80px,90px)scale(1.2)}}.basics-scan-line{opacity:.2;background:linear-gradient(#0000,#a78bfa4d,#0000);width:100%;height:110px;animation:5s linear infinite basics-scan;position:absolute;top:-20%;left:0}@keyframes basics-scan{to{top:110%}}.basics-orbit{border:1px solid #a78bfa45;border-radius:50%;animation:13s linear infinite basics-orbit-spin;position:absolute;box-shadow:0 0 30px #a78bfa14}.basics-orbit-one{width:410px;height:210px;top:13%;left:-90px;transform:rotate(35deg)}.basics-orbit-two{border-color:#60a5fa40;width:500px;height:230px;animation-duration:17s;animation-direction:reverse;top:48%;right:-180px}.basics-orbit-three{border-color:#f0abfc33;width:280px;height:280px;animation-duration:10s;top:76%;left:25%}@keyframes basics-orbit-spin{to{rotate:360deg}}.basics-floating-code{color:#a78bfaa6;text-shadow:0 0 18px #a78bfa59;white-space:nowrap;font:600 clamp(13px,1.5vw,20px) IBM Plex Mono,monospace;animation:4s ease-in-out infinite alternate basics-code-float;position:absolute}.basics-code-one{font-size:30px;top:8%;left:7%}.basics-code-two{color:#60a5faa6;animation-delay:-1.5s;top:24%;right:4%}.basics-code-three{color:#f0abfca6;animation-delay:-2.5s;top:43%;left:4%}.basics-code-four{animation-delay:-1s;top:68%;right:5%}.basics-code-five{color:#67e8f999;animation-delay:-3s;top:89%;left:12%}@keyframes basics-code-float{0%{opacity:.35;transform:translateY(-17px)rotate(-3deg)}to{opacity:1;transform:translateY(20px)rotate(3deg)}}.basics-particle{background:var(--basics-purple);width:8px;height:8px;box-shadow:0 0 18px var(--basics-purple);border-radius:50%;animation:1.5s ease-in-out infinite alternate basics-particle-pulse;position:absolute}.basics-particle-one{top:14%;left:42%}.basics-particle-two{background:var(--basics-cyan);box-shadow:0 0 18px var(--basics-cyan);animation-delay:-.5s;top:39%;right:20%}.basics-particle-three{background:var(--basics-pink);box-shadow:0 0 18px var(--basics-pink);animation-delay:-1s;top:65%;left:32%}.basics-particle-four{animation-delay:-.8s;top:88%;right:15%}@keyframes basics-particle-pulse{0%{opacity:.35;transform:scale(.6)}to{opacity:1;transform:scale(1.9)}}.basics-topbar{z-index:5;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:20px;width:min(1240px,100% - 48px);min-height:82px;margin:auto;display:flex;position:relative}.basics-brand{letter-spacing:-1px;white-space:nowrap;align-items:center;gap:10px;font:700 21px IBM Plex Mono,monospace;display:flex}.basics-brand-icon{color:var(--basics-purple);filter:drop-shadow(0 0 10px #a78bfab3);place-items:center;display:grid}.basics-brand-dot{color:var(--basics-purple)}.basics-topbar nav{align-items:center;gap:25px;display:flex}.basics-topbar nav a{color:#b4aecb;font-size:14px;transition:color .2s}.basics-topbar nav a:hover{color:var(--basics-purple)}.basics-status{color:var(--basics-cyan);letter-spacing:1px;white-space:nowrap;font:600 10px IBM Plex Mono,monospace}.basics-status i{background:var(--basics-cyan);width:7px;height:7px;box-shadow:0 0 12px var(--basics-cyan);border-radius:50%;margin-left:7px;display:inline-block}.basics-hero{grid-template-columns:1fr 1fr;align-items:center;gap:45px;width:min(1240px,100% - 48px);min-height:610px;margin:auto;padding:65px 0 75px;display:grid}.basics-eyebrow{color:#d2c4ff;letter-spacing:.8px;background:#a78bfa14;border:1px solid #a78bfa59;border-radius:30px;align-items:center;gap:9px;padding:10px 15px;font:600 10px IBM Plex Mono,monospace;display:inline-flex}.basics-eyebrow svg{color:var(--basics-purple)}.basics-hero h1{letter-spacing:-1.5px;margin:25px 0 17px;font-size:clamp(43px,5.2vw,68px);font-weight:900;line-height:1.3}.basics-hero h1 strong{color:var(--basics-purple);text-shadow:0 0 35px #a78bfa4d;display:block}.basics-hero-content>p{color:#aaa5c3;max-width:560px;margin:0;font-size:17px;line-height:2}.basics-hero-actions{flex-wrap:wrap;gap:13px;margin-top:30px;display:flex}.basics-primary-btn,.basics-secondary-btn,.basics-complete-btn,.basics-next-btn{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 20px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,border-color .2s;display:inline-flex}.basics-primary-btn{color:#100b22;background:linear-gradient(120deg,#c4b5fd,#8b5cf6);box-shadow:0 8px 28px #8b5cf638}.basics-primary-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #8b5cf666}.basics-secondary-btn,.basics-next-btn{color:#f0ebff;background:#ffffff09;border-color:#ffffff24}.basics-secondary-btn:hover,.basics-next-btn:hover{border-color:var(--basics-purple)}.basics-hero-meta{color:#aaa5c3;flex-wrap:wrap;gap:23px;margin-top:34px;font-size:13px;display:flex}.basics-hero-meta span{align-items:center;gap:7px;display:inline-flex}.basics-hero-meta svg{color:var(--basics-purple)}.basics-visual{place-items:center;min-height:440px;display:grid;position:relative}.basics-code-card{z-index:3;background:#0e0d20f5;border:1px solid #a78bfa66;border-radius:17px;width:min(100%,460px);transition:transform .3s;position:relative;overflow:hidden;transform:perspective(1000px)rotateY(-5deg)rotateX(2deg);box-shadow:0 25px 90px #00000073,0 0 45px #8b5cf621}.basics-code-card:hover{transform:perspective(1000px)rotateY(0)rotateX(0)translateY(-5px)}.basics-code-card-top,.basics-code-card-bottom{color:#aaa5c3;justify-content:space-between;align-items:center;padding:16px 19px;font:10px IBM Plex Mono,monospace;display:flex}.basics-code-card-top{border-bottom:1px solid #ffffff17}.basics-window-dots{gap:6px;display:flex}.basics-window-dots i{background:#a78bfa;border-radius:50%;width:8px;height:8px}.basics-window-dots i:nth-child(2){background:#60a5fa}.basics-window-dots i:nth-child(3){background:#f0abfc}.basics-code-preview{background:radial-gradient(at 90% 10%,#8b5cf61a,#0000 55%);padding:22px 20px 27px}.basics-code-preview p{text-align:left;color:#e6e0ff;direction:ltr;min-height:30px;margin:0;font:12px/2 IBM Plex Mono,monospace}.basics-code-preview p>span{color:#656080;width:29px;display:inline-block}.basics-code-preview b{color:#c4b5fd}.basics-code-preview em{color:#67e8f9;font-style:normal}.basics-code-card-bottom{background:#a78bfa0d;border-top:1px solid #ffffff14}.basics-code-card-bottom span:first-child{color:#c4b5fd}.basics-code-card-bottom span:last-child{color:var(--basics-cyan)}.basics-code-card-bottom i{background:#4ade80;border-radius:50%;width:7px;height:7px;margin-left:5px;display:inline-block;box-shadow:0 0 10px #4ade80}.basics-visual-orbit{border:1px solid #a78bfa59;border-radius:50%;width:440px;height:185px;animation:10s linear infinite basics-visual-spin;position:absolute;transform:rotate(-30deg)}.basics-visual-orbit-two{border-color:#60a5fa47;width:530px;height:235px;animation-duration:14s;animation-direction:reverse}@keyframes basics-visual-spin{to{rotate:360deg}}.basics-floating-symbol{z-index:4;width:58px;height:58px;color:var(--basics-purple);background:#1b1737;border:1px solid #a78bfa80;border-radius:15px;place-items:center;animation:3s ease-in-out infinite alternate basics-symbol-float;display:grid;position:absolute;box-shadow:0 0 30px #a78bfa33}.basics-symbol-one{top:5%;right:5%}.basics-symbol-two{color:var(--basics-cyan);background:#10232f;border-color:#67e8f966;animation-delay:-1.5s;bottom:6%;left:5%}@keyframes basics-symbol-float{0%{transform:translateY(-10px)rotate(-8deg)}to{transform:translateY(15px)rotate(8deg)}}.basics-progress{border:1px solid var(--basics-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff09;border-radius:14px;grid-template-columns:2fr repeat(3,1fr);align-items:center;gap:25px;width:min(1100px,100% - 48px);margin:0 auto 65px;padding:25px;display:grid}.basics-progress-info>div:first-child{color:#b4aecb;justify-content:space-between;font-size:13px;display:flex}.basics-progress-info strong{color:var(--basics-purple);font:700 17px IBM Plex Mono,monospace}.basics-progress-track{background:#ffffff17;border-radius:10px;height:7px;margin:12px 0 8px;overflow:hidden}.basics-progress-track>div{border-radius:inherit;background:linear-gradient(90deg,#60a5fa,#a78bfa,#f0abfc);height:100%;transition:width .4s;box-shadow:0 0 15px #a78bfa80}.basics-progress-info small{color:#9690b0;font-size:11px}.basics-stat{border-right:1px solid var(--basics-line);flex-direction:column;align-items:center;gap:6px;display:flex}.basics-stat strong{color:var(--basics-purple);font:700 25px IBM Plex Mono,monospace}.basics-stat span{color:#aaa5c3;font-size:12px}.basics-section{width:min(1180px,100% - 48px);margin:0 auto;padding:65px 0;scroll-margin-top:25px}.basics-section-heading{text-align:center;margin-bottom:35px}.basics-section-heading>span{color:var(--basics-purple);letter-spacing:1.5px;font:600 11px IBM Plex Mono,monospace}.basics-section-heading h2{margin:12px 0 8px;font-size:clamp(27px,3.5vw,39px);font-weight:800}.basics-section-heading p{color:#aaa5c3;margin:0;font-size:15px}.basics-level-grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.basics-level-card{border:1px solid var(--basics-line);background:linear-gradient(145deg,#1e1a3bf5,#0f0e22f7);border-radius:14px;padding:25px;transition:transform .25s,border-color .25s,box-shadow .25s}.basics-level-card:hover{border-color:#a78bfa8c;transform:translateY(-6px);box-shadow:0 15px 35px #00000040}.basics-level-top{justify-content:space-between;align-items:center;display:flex}.basics-level-top>span{color:var(--basics-purple);font:700 32px IBM Plex Mono,monospace}.basics-level-top small{color:#a49cbe;letter-spacing:1px;font:10px IBM Plex Mono,monospace}.basics-level-card h3{margin:15px 0 7px;font-size:21px}.basics-level-card>p{color:#b5b0cb;font-size:14px;line-height:1.8}.basics-topic-list{flex-wrap:wrap;gap:7px;margin:18px 0;display:flex}.basics-topic-list span{color:#d5caff;background:#a78bfa0f;border:1px solid #a78bfa33;border-radius:6px;padding:6px 9px;font-size:11px}.basics-challenge{border-right:2px solid var(--basics-purple);background:#a78bfa14;padding:13px}.basics-challenge b{color:#c4b5fd;align-items:center;gap:7px;font-size:13px;display:flex}.basics-challenge p{color:#c0bad4;margin:5px 0 0;font-size:13px;line-height:1.8}.basics-project{color:var(--basics-cyan);align-items:center;gap:7px;margin-top:17px;font-size:13px;display:flex}.basics-learning-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}.basics-lesson-list,.basics-lesson-content{border:1px solid var(--basics-line);background:var(--basics-panel);border-radius:14px;overflow:hidden}.basics-lesson-list{padding:9px}.basics-list-heading{color:#f0ebff;justify-content:space-between;padding:14px 12px;font-size:14px;display:flex}.basics-list-heading small{color:var(--basics-purple);font:12px IBM Plex Mono,monospace}.basics-lesson-item{color:#f5f2ff;text-align:right;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:11px;width:100%;margin-bottom:3px;padding:13px 10px;transition:all .2s;display:flex}.basics-lesson-item:hover{background:#ffffff0b}.basics-lesson-item.active{background:#a78bfa1a;border-color:#a78bfa59}.basics-lesson-number{color:#aaa5c3;background:#ffffff0e;border-radius:8px;flex:0 0 34px;place-items:center;height:34px;font:12px IBM Plex Mono,monospace;display:grid}.basics-lesson-item.active .basics-lesson-number{background:var(--basics-purple);color:#100b22}.basics-lesson-item.is-done .basics-lesson-number{color:var(--basics-cyan)}.basics-lesson-item.active.is-done .basics-lesson-number{color:#100b22}.basics-lesson-info{flex-direction:column;gap:4px;min-width:0;display:flex}.basics-lesson-info strong{font-size:12px}.basics-lesson-info small{color:#9993b1;font-size:10px}.basics-lesson-arrow{color:#9993b1;margin-right:auto}.basics-lesson-content{padding:29px}.basics-lesson-kicker{color:var(--basics-purple);letter-spacing:1px;justify-content:space-between;font:10px IBM Plex Mono,monospace;display:flex}.basics-lesson-kicker span:last-child{color:#9993b1}.basics-lesson-content h3{margin:15px 0;font-size:27px}.basics-explanation{color:#c0bad4;font-size:15px;line-height:2}.basics-lesson-content h4{margin:25px 0 10px;font-size:16px}.basics-points{grid-template-columns:1fr 1fr;gap:10px 20px;padding:0;list-style:none;display:grid}.basics-points li{color:#d0cbe0;font-size:13px;line-height:1.8}.basics-points li:before{content:"✦";color:var(--basics-purple);margin-left:9px}.basics-example{background:#090817;border:1px solid #ffffff17;border-radius:10px;margin-top:23px;overflow:hidden}.basics-example-heading{color:#e8e1ff;border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;display:flex}.basics-example-heading span:first-child{align-items:center;gap:7px;display:flex}.basics-example-heading span:last-child{color:var(--basics-cyan);font:10px IBM Plex Mono,monospace}.basics-example pre{text-align:left;color:#c4b5fd;white-space:pre-wrap;direction:ltr;margin:0;padding:18px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.basics-task{background:#a78bfa13;border:1px solid #a78bfa33;border-radius:9px;margin-top:18px;padding:15px}.basics-task b{color:var(--basics-purple);align-items:center;gap:7px;font-size:13px;display:flex}.basics-task p{color:#d0cbe0;margin:5px 0 0;font-size:13px;line-height:1.8}.basics-lesson-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.basics-complete-btn{color:#100b22;background:linear-gradient(120deg,#c4b5fd,#8b5cf6)}.basics-next-btn{color:#eeeaff;border-color:var(--basics-line);background:#211d3d}.basics-lab{background:#111026;border:1px solid #a78bfa40;border-radius:15px;max-width:950px;margin:auto;overflow:hidden;box-shadow:0 20px 65px #00000040}.basics-lab-header{background:#a78bfa0e;border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;padding:17px 21px;display:flex}.basics-lab-header>div{color:#e8e1ff;align-items:center;gap:10px;font:12px IBM Plex Mono,monospace;display:flex}.basics-lab-header>div svg{color:var(--basics-purple)}.basics-lab-header>span{color:#86efac;font:10px IBM Plex Mono,monospace}.basics-lab-header>span i{background:#4ade80;border-radius:50%;width:7px;height:7px;margin-left:5px;display:inline-block;box-shadow:0 0 10px #4ade80}.basics-code-editor{resize:vertical;color:#c4b5fd;tab-size:2;background:#090817;border:0;outline:none;width:100%;min-height:260px;padding:22px;font:13px/1.9 IBM Plex Mono,monospace;display:block}.basics-code-editor:focus{box-shadow:inset 0 0 0 1px #a78bfa4d}.basics-lab-actions{border-bottom:1px solid #ffffff14;flex-wrap:wrap;gap:10px;padding:16px 20px;display:flex}.basics-output{background:#090817;border:1px solid #ffffff14;border-radius:9px;margin:18px;overflow:hidden}.basics-output-heading{color:#c4b5fd;border-bottom:1px solid #ffffff14;justify-content:space-between;padding:12px 15px;font:10px IBM Plex Mono,monospace;display:flex}.basics-output-heading span:first-child{align-items:center;gap:7px;display:flex}.basics-output-heading span:last-child{color:#8b86a7}.basics-output pre{color:#86efac;white-space:pre-wrap;text-align:left;min-height:75px;margin:0;padding:16px;font:12px/1.9 IBM Plex Mono,monospace;overflow-x:auto}.basics-lab-note{color:#9993b1;margin:0;padding:0 20px 18px;font-size:12px;line-height:1.8}.basics-quiz-start,.basics-quiz-box{border:1px solid var(--basics-line);background:var(--basics-panel);border-radius:14px;max-width:800px;margin:auto;padding:30px}.basics-quiz-start{text-align:center}.basics-quiz-icon{width:58px;height:58px;color:var(--basics-purple);background:#a78bfa1a;border:1px solid #a78bfa66;border-radius:16px;place-items:center;margin:0 auto 15px;display:grid}.basics-quiz-start h3{margin:0 0 7px;font-size:21px}.basics-quiz-start p{color:#aaa5c3;margin:0 0 20px;font-size:14px}.basics-question{border-bottom:1px solid #ffffff14;padding:18px 0}.basics-question h3{align-items:center;gap:12px;margin:0 0 14px;font-size:16px;display:flex}.basics-question h3 span{color:var(--basics-purple);font:12px IBM Plex Mono,monospace}.basics-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.basics-options button{color:#d0cbe0;text-align:right;background:#ffffff06;border:1px solid #ffffff1a;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;font-size:13px;transition:all .2s;display:flex}.basics-options button:hover:not(:disabled){border-color:#a78bfa80}.basics-options button.selected{border-color:var(--basics-purple);color:#ddd3ff;background:#a78bfa1f}.basics-options button.correct{color:#86efac;background:#4ade801a;border-color:#4ade80}.basics-quiz-box>.basics-primary-btn{margin-top:20px}.basics-quiz-result{text-align:center;background:#a78bfa14;border-radius:10px;margin-top:20px;padding:20px}.basics-quiz-result>svg{color:#facc15}.basics-quiz-result>strong{color:var(--basics-purple);margin-top:10px;font:700 34px IBM Plex Mono,monospace;display:block}.basics-quiz-result h3{margin-bottom:5px}.basics-quiz-result p{color:#aaa5c3;font-size:13px}.basics-full-course{background:radial-gradient(at 10%,#8b5cf62b,#0000 50%),#17142e;border:1px solid #a78bfa4d;border-radius:16px;align-items:center;gap:25px;padding:35px;display:flex}.basics-course-symbol{color:#100b22;background:linear-gradient(135deg,#c4b5fd,#8b5cf6);border-radius:20px;flex:0 0 76px;place-items:center;height:76px;display:grid;box-shadow:0 0 30px #8b5cf640}.basics-course-info>span{color:var(--basics-purple);letter-spacing:1.4px;font:600 10px IBM Plex Mono,monospace}.basics-full-course h2{margin:9px 0;font-size:24px}.basics-full-course p{color:#aaa5c3;margin:0 0 18px;font-size:14px;line-height:1.8}.basics-footer{border-top:1px solid var(--basics-line);text-align:center;background:#00000026;margin-top:65px;padding:38px 20px}.basics-footer strong{color:var(--basics-purple);font:700 21px IBM Plex Mono,monospace}.basics-footer strong span{color:#fff}.basics-footer p{color:#aaa5c3;margin:8px 0 15px;font-size:13px}.basics-footer small{color:#8f89aa;font:10px IBM Plex Mono,monospace}@media (width<=900px){.basics-hero{gap:25px}.basics-topbar nav{gap:13px}.basics-status{display:none}.basics-learning-layout{grid-template-columns:260px 1fr}.basics-lesson-content{padding:22px}.basics-progress{grid-template-columns:1fr 1fr 1fr}.basics-progress-info{grid-column:1/-1}.basics-stat{border-right:0}}@media (width<=700px){.basics-topbar{flex-wrap:wrap;gap:12px;width:calc(100% - 30px);min-height:70px;padding:14px 0}.basics-topbar nav{order:2;justify-content:space-between;gap:8px;width:100%;overflow-x:auto}.basics-topbar nav a{white-space:nowrap;font-size:12px}.basics-brand{font-size:19px}.basics-hero{grid-template-columns:1fr;gap:35px;width:calc(100% - 34px);padding:55px 0 45px}.basics-hero h1{font-size:43px}.basics-hero-content>p{font-size:15px}.basics-hero-meta{gap:13px}.basics-visual{min-height:340px}.basics-code-card{width:94%}.basics-visual-orbit{width:330px;height:150px}.basics-visual-orbit-two{width:390px;height:190px}.basics-progress{grid-template-columns:1fr 1fr 1fr;gap:15px;width:calc(100% - 30px);margin-bottom:40px;padding:20px 12px}.basics-progress-info{grid-column:1/-1}.basics-stat strong{font-size:21px}.basics-stat span{text-align:center;font-size:10px}.basics-section{width:calc(100% - 30px);padding:45px 0}.basics-level-grid,.basics-learning-layout{grid-template-columns:1fr}.basics-lesson-list{grid-template-columns:1fr 1fr;display:grid}.basics-list-heading{grid-column:1/-1}.basics-lesson-item{gap:7px;padding:10px 7px}.basics-lesson-info strong{font-size:10px}.basics-lesson-info small{font-size:9px}.basics-lesson-number{flex-basis:29px;height:29px;font-size:10px}.basics-lesson-content{padding:19px}.basics-lesson-content h3{font-size:23px}.basics-points{grid-template-columns:1fr;gap:5px}.basics-options{grid-template-columns:1fr}.basics-quiz-start,.basics-quiz-box{padding:20px}.basics-full-course{flex-direction:column;align-items:flex-start;padding:24px}.basics-full-course h2{font-size:21px}.basics-floating-code{opacity:.75}.basics-code-one{font-size:20px}}@media (prefers-reduced-motion:reduce){.basics-course *,.basics-course :before,.basics-course :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.achievements-page{--ach-gold:#fbbf24;--ach-purple:#a78bfa;--ach-blue:#60a5fa;isolation:isolate;color:#f5f2ff;background:#0b0a17;min-height:100vh;font-family:Tajawal,sans-serif;position:relative;overflow:hidden}.achievements-page *{box-sizing:border-box}.achievements-page button{font:inherit;cursor:pointer}.achievements-background{z-index:-1;pointer-events:none;background:radial-gradient(at 80% 10%,#7c3aed33,#0000 35%),radial-gradient(at 10% 40%,#d977061f,#0000 32%),linear-gradient(150deg,#0b0a17,#15112a 55%,#0b0a17);position:absolute;inset:0;overflow:hidden}.achievements-grid{opacity:.35;background-image:linear-gradient(#a78bfa12 1px,#0000 1px),linear-gradient(90deg,#a78bfa12 1px,#0000 1px);background-size:42px 42px;animation:6s linear infinite achievements-grid-move;position:absolute;inset:0}@keyframes achievements-grid-move{to{background-position:42px 42px}}.achievements-glow{filter:blur(100px);opacity:.25;border-radius:50%;width:420px;height:420px;animation:5s ease-in-out infinite alternate achievements-glow-move;position:absolute}.achievements-glow-one{background:#7c3aed;top:5%;right:-180px}.achievements-glow-two{background:#d97706;animation-delay:-2s;top:40%;left:-190px}@keyframes achievements-glow-move{to{opacity:.4;transform:translate(-70px,75px)scale(1.2)}}.achievements-floating-code{color:#a78bfa73;white-space:nowrap;font:600 18px IBM Plex Mono,monospace;animation:3s ease-in-out infinite alternate achievements-float;position:absolute}.code-a{top:13%;left:5%}.code-b{color:#fbbf248c;animation-delay:-1s;top:36%;right:4%}.code-c{color:#60a5fa80;animation-delay:-2s;top:72%;left:4%}@keyframes achievements-float{to{opacity:1;transform:translateY(22px)rotate(3deg)}}.achievements-orbit{border:1px solid #a78bfa38;border-radius:50%;width:400px;height:180px;animation:12s linear infinite achievements-orbit-spin;position:absolute}.orbit-a{top:10%;left:10%;transform:rotate(35deg)}.orbit-b{border-color:#fbbf242e;width:500px;height:230px;animation-duration:16s;animation-direction:reverse;top:45%;right:-200px}@keyframes achievements-orbit-spin{to{rotate:360deg}}.achievements-header{border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;gap:20px;width:min(1200px,100% - 40px);min-height:78px;margin:auto;display:flex}.achievements-brand{color:#f5f2ff;background:0 0;border:0;align-items:center;gap:10px;font:700 20px IBM Plex Mono,monospace;display:flex}.achievements-brand svg,.achievements-brand span span,.achievements-footer strong span{color:var(--ach-purple)}.achievements-header nav{gap:25px;display:flex}.achievements-header nav button{color:#aaa5c3;background:0 0;border:0;font-size:13px;transition:color .2s}.achievements-header nav button:hover,.achievements-header nav button.current{color:var(--ach-purple)}.achievements-refresh{color:#d8ccff;background:#a78bfa14;border:1px solid #a78bfa4d;border-radius:8px;align-items:center;gap:8px;padding:9px 13px;font-size:12px;display:flex}.achievements-hero{grid-template-columns:1.2fr .8fr;align-items:center;gap:35px;width:min(1100px,100% - 40px);min-height:390px;margin:auto;display:grid}.achievements-eyebrow{color:#fcd34d;letter-spacing:.7px;background:#fbbf2412;border:1px solid #fbbf244d;border-radius:30px;align-items:center;gap:8px;padding:9px 14px;font:600 10px IBM Plex Mono,monospace;display:inline-flex}.achievements-hero h1{margin:23px 0 15px;font-size:clamp(37px,5vw,58px);font-weight:900;line-height:1.35}.achievements-hero h1 strong{color:var(--ach-gold);text-shadow:0 0 30px #fbbf2438;display:block}.achievements-hero-copy>p{color:#aaa5c3;max-width:530px;font-size:16px;line-height:2}.achievements-trophy{place-items:center;min-height:280px;display:grid;position:relative}.trophy-icon{z-index:2;width:150px;height:150px;color:var(--ach-gold);background:linear-gradient(145deg,#3d2c13,#201a24);border:1px solid #fbbf2480;border-radius:35px;place-items:center;animation:2.5s ease-in-out infinite alternate trophy-hover;display:grid;position:relative;box-shadow:0 0 60px #fbbf242b,inset 0 0 30px #fbbf2414}@keyframes trophy-hover{to{transform:translateY(-13px)rotate(4deg);box-shadow:0 0 85px #fbbf2447}}.trophy-ring{border:1px solid #fbbf2440;border-radius:50%;width:230px;height:230px;animation:10s linear infinite achievements-ring;position:absolute}.ring-two{border-color:#a78bfa59;width:290px;height:170px;animation-duration:13s;animation-direction:reverse}@keyframes achievements-ring{to{rotate:360deg}}.trophy-spark{color:var(--ach-gold);animation:1.5s ease-in-out infinite alternate trophy-sparkle;position:absolute}.spark-one{top:25px;right:25%}.spark-two{color:var(--ach-purple);animation-delay:-.5s;bottom:45px;left:22%}.spark-three{animation-delay:-1s;top:55px;left:20%}@keyframes trophy-sparkle{to{opacity:.4;transform:scale(1.7)rotate(35deg)}}.achievements-stats{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff09;border:1px solid #a78bfa2b;border-radius:14px;grid-template-columns:repeat(4,1fr);width:min(1100px,100% - 40px);margin:0 auto 65px;display:grid}.achievement-stat{border-left:1px solid #ffffff12;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:145px;display:flex}.achievement-stat:last-child{border-left:0}.stat-icon{color:var(--ach-gold)}.achievement-stat strong{color:#fcd34d;font:700 29px IBM Plex Mono,monospace}.achievement-stat small{color:#aaa5c3;font-size:12px}.achievements-section{width:min(1100px,100% - 40px);margin:0 auto;padding:35px 0}.achievements-section-heading{justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px;display:flex}.achievements-section-heading span{color:var(--ach-purple);letter-spacing:1.3px;font:600 10px IBM Plex Mono,monospace}.achievements-section-heading h2{margin:8px 0 5px;font-size:27px}.achievements-section-heading p{color:#aaa5c3;margin:0;font-size:13px}.achievements-section-heading>strong{color:var(--ach-gold);font:700 30px IBM Plex Mono,monospace}.overall-progress-track,.achievement-course-track{background:#ffffff17;border-radius:20px;height:9px;overflow:hidden}.overall-progress-track>div,.achievement-course-track>div{border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#c4b5fd,#fbbf24);height:100%;transition:width .5s;box-shadow:0 0 16px #a78bfa66}.overall-progress-caption{color:#aaa5c3;justify-content:space-between;margin-top:10px;font-size:12px;display:flex}.achievement-courses-grid{grid-template-columns:repeat(2,1fr);gap:15px;display:grid}.achievement-course-card{background:linear-gradient(145deg,#1c1934f2,#110f22f5);border:1px solid #a78bfa2b;border-radius:13px;padding:22px;transition:transform .2s,border-color .2s}.achievement-course-card:hover{border-color:#a78bfa73;transform:translateY(-4px)}.achievement-course-top{justify-content:space-between;align-items:center;display:flex}.achievement-course-icon{width:43px;height:43px;color:var(--ach-purple);background:#a78bfa1a;border-radius:11px;place-items:center;display:grid}.achievement-course-percent{color:var(--ach-purple);font:700 18px IBM Plex Mono,monospace}.achievement-course-card h3{margin:17px 0;font-size:17px}.achievement-course-track{height:6px}.achievement-course-bottom{justify-content:space-between;align-items:center;gap:10px;margin-top:15px;display:flex}.achievement-course-bottom>span{color:#aaa5c3;font-size:12px}.achievement-course-bottom button{color:#c4b5fd;background:0 0;border:0;align-items:center;gap:6px;font-size:12px;display:flex}.achievement-course-card.orange .achievement-course-icon,.achievement-course-card.orange .achievement-course-percent{color:#fb923c}.achievement-course-card.blue .achievement-course-icon,.achievement-course-card.blue .achievement-course-percent{color:#60a5fa}.achievement-course-card.yellow .achievement-course-icon,.achievement-course-card.yellow .achievement-course-percent{color:#facc15}.achievement-course-card.green .achievement-course-icon,.achievement-course-card.green .achievement-course-percent{color:#4ade80}.achievement-course-card.cyan .achievement-course-icon,.achievement-course-card.cyan .achievement-course-percent{color:#67e8f9}.achievement-course-card.pink .achievement-course-icon,.achievement-course-card.pink .achievement-course-percent{color:#f0abfc}.achievement-badges-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.achievement-badge-card{text-align:center;background:#ffffff06;border:1px solid #ffffff14;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;min-height:220px;padding:22px 15px;transition:transform .2s,border-color .2s;display:flex}.achievement-badge-card.unlocked{background:linear-gradient(145deg,#fbbf2417,#a78bfa0a);border-color:#fbbf2447}.achievement-badge-card.unlocked:hover{border-color:#fbbf2499;transform:translateY(-5px)}.achievement-badge-card.locked{opacity:.55}.achievement-badge-icon{color:#fcd34d;background:#fbbf2414;border:1px solid #fbbf244d;border-radius:20px;place-items:center;width:65px;height:65px;display:grid}.achievement-badge-card.locked .achievement-badge-icon{color:#77718e;background:#ffffff0a;border-color:#ffffff1f}.achievement-badge-card h3{margin:15px 0 5px;font-size:15px}.achievement-badge-card p{color:#aaa5c3;min-height:38px;margin:0;font-size:11px;line-height:1.7}.achievement-badge-status{color:#fcd34d;align-items:center;gap:5px;margin-top:13px;font-size:11px;display:flex}.achievement-badge-card.locked .achievement-badge-status{color:#88829f}.achievements-empty-tip{background:#fbbf240b;border:1px solid #fbbf2433;border-radius:13px;align-items:center;gap:17px;width:min(1100px,100% - 40px);margin:45px auto 65px;padding:24px;display:flex}.achievements-empty-tip>svg{color:var(--ach-gold);flex:none}.achievements-empty-tip div{flex:1}.achievements-empty-tip h3{margin:0 0 5px;font-size:17px}.achievements-empty-tip p{color:#aaa5c3;margin:0;font-size:12px;line-height:1.8}.achievements-empty-tip button{color:#211506;white-space:nowrap;background:linear-gradient(120deg,#fcd34d,#d97706);border:0;border-radius:8px;align-items:center;gap:7px;padding:11px 16px;font-size:12px;font-weight:800;display:flex}.achievements-footer{text-align:center;background:#00000026;border-top:1px solid #a78bfa26;padding:35px 20px}.achievements-footer strong{color:#f5f2ff;font:700 21px IBM Plex Mono,monospace}.achievements-footer p{color:#aaa5c3;margin:8px 0 13px;font-size:13px}.achievements-footer small{color:#88829f;font:10px IBM Plex Mono,monospace}@media (width<=800px){.achievements-hero{grid-template-columns:1fr .7fr;min-height:340px}.achievements-badges-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.achievements-header{flex-wrap:wrap;width:calc(100% - 28px);padding:14px 0}.achievements-header nav{order:3;justify-content:space-between;gap:10px;width:100%}.achievements-header nav button{font-size:11px}.achievements-brand{font-size:17px}.achievements-refresh{padding:8px;font-size:11px}.achievements-hero{grid-template-columns:1fr;gap:10px;width:calc(100% - 32px);padding:45px 0 25px}.achievements-hero h1{font-size:39px}.achievements-hero-copy>p{font-size:14px}.achievements-trophy{min-height:230px}.trophy-icon{width:120px;height:120px}.trophy-icon svg{width:60px;height:60px}.trophy-ring{width:190px;height:190px}.ring-two{width:240px;height:140px}.achievements-stats{grid-template-columns:repeat(2,1fr);width:calc(100% - 28px)}.achievement-stat{border-bottom:1px solid #ffffff12;min-height:125px}.achievement-stat:nth-child(2){border-left:0}.achievement-stat:nth-child(3),.achievement-stat:nth-child(4){border-bottom:0}.achievements-section{width:calc(100% - 28px);padding:25px 0}.achievements-section-heading h2{font-size:23px}.achievement-courses-grid{grid-template-columns:1fr}.achievement-badges-grid{grid-template-columns:repeat(2,1fr);gap:9px}.achievement-badge-card{min-height:205px;padding:17px 10px}.achievements-empty-tip{flex-wrap:wrap;width:calc(100% - 28px);padding:19px}.achievements-empty-tip div{flex-basis:calc(100% - 50px)}.achievements-empty-tip button{justify-content:center;width:100%}}@media (prefers-reduced-motion:reduce){.achievements-page *,.achievements-page :before,.achievements-page :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#080b16;margin:0;font-family:Cairo,sans-serif}button,a{-webkit-tap-highlight-color:transparent}