@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#080d18;--panel:#101827;--line:#253047;--text:#eaf1ff;--muted:#8c9bb5;--lime:#c4ff68;--blue:#8ea9ff;--font:Inter,Tajawal,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;min-height:100vh}html[lang=ar] body{font-family:Tajawal,Inter,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}main{position:relative;z-index:1}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 75% 5%,#17324655,transparent 75%),linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:auto,64px 64px,64px 64px;z-index:0}.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px max(4%,calc((100vw - 1500px)/2));background:#090f1bea;backdrop-filter:blur(20px);border-bottom:1px solid #ffffff14}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.8px;font-size:21px;white-space:nowrap;line-height:1}.brand small{display:block;font:9px 'IBM Plex Mono',monospace;letter-spacing:2px;color:var(--muted);margin-top:6px}.brand-symbol{display:grid;place-items:center;width:42px;height:42px;background:var(--lime);color:#07100b;border-radius:12px;font-size:30px;box-shadow:0 0 30px #bfff6330}.accent,.green{color:var(--lime)}.main-nav,.nav-actions{display:flex;align-items:center;gap:28px}.main-nav a,.subtle,.language{font-size:13px;color:#c5d0df;font-weight:700;background:none;border:0}.main-nav a:hover,.subtle:hover,.language:hover{color:var(--lime)}.nav-actions{gap:16px}.nav-actions form{margin:0}.language{border:1px solid #354056;border-radius:8px;padding:9px 13px}.user-chip{font-size:12px;color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;border:1px solid transparent;padding:15px 24px;border-radius:9px;font-weight:800;font-size:14px;transition:transform .2s,background .2s,box-shadow .2s}.button:hover{transform:translateY(-3px)}.button.primary{background:var(--lime);color:#101809;box-shadow:0 10px 38px #bfff6120}.button.primary:hover{box-shadow:0 12px 50px #bfff6145}.button.secondary{border-color:#3a4960;background:#141f30;color:#e4efff}.button.small{padding:10px 15px;font-size:12px}.button.wide{width:100%}.hero{max-width:1530px;margin:auto;min-height:690px;padding:90px 4% 85px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:65px}.eyebrow,.kicker{font:11px 'IBM Plex Mono',monospace;letter-spacing:1.8px;color:var(--lime);font-weight:600;text-transform:uppercase}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime);margin-inline-end:8px;animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.45;transform:scale(.75)}}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(44px,4.6vw,78px);line-height:1.14;letter-spacing:-2.8px;margin:27px 0}.hero h1 em,.feature-copy em,.cta em,.inner-heading em{color:var(--lime);font-style:normal}.hero-copy>p{color:#9daec5;font-size:18px;line-height:1.9;max-width:620px}.actions{display:flex;flex-wrap:wrap;gap:13px;margin:35px 0 45px}.hero-proof{display:flex;align-items:center;gap:18px;color:var(--muted)}.hero-proof b,.hero-proof small{display:block}.hero-proof b{color:#e6edfa;font-size:13px}.hero-proof small{font-size:11px}.avatars{color:var(--lime);letter-spacing:-6px;padding-inline-end:9px}.proof-line{width:1px;height:34px;background:var(--line)}.hero-machine{background:linear-gradient(150deg,#16243a,#0b1220);border:1px solid #3c4b63;border-radius:17px;min-height:490px;box-shadow:0 45px 100px #0008,0 0 90px #a5ff2310;transform:perspective(1100px) rotateY(-4deg);overflow:hidden;animation:float 7s ease-in-out infinite}@keyframes float{50%{transform:perspective(1100px) rotateY(-2deg) translateY(-10px)}}.machine-top,.machine-bottom,.code-head{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid #ffffff16;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#b2c4db}.machine-bottom{border-top:1px solid #ffffff16;border-bottom:0}.machine-grid{height:400px;position:relative;background:radial-gradient(circle at 50% 35%,#aaff2211,transparent 45%),linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}.connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.connectors path{stroke:#c4ff6880;stroke-width:1.5;fill:none;stroke-dasharray:6 8;animation:dash 8s linear infinite}@keyframes dash{to{stroke-dashoffset:-140}}.db-node{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:#18283c;border:1px solid #3c5566;border-radius:12px;padding:12px 22px;min-width:125px;box-shadow:0 12px 32px #0007}.db-node span{color:var(--lime);font-size:28px}.db-node strong{font:12px 'IBM Plex Mono',monospace}.db-node small{font:9px 'IBM Plex Mono',monospace;color:#8fa6bd}.main-node{left:50%;top:40px;transform:translateX(-50%);border-color:var(--lime);box-shadow:0 0 35px #c4ff6824}.node-a{left:7%;top:230px}.node-b{right:7%;top:230px}.node-c{left:50%;top:310px;transform:translateX(-50%)}.stats-ribbon{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #273449;background:#101a2b;max-width:100%}.stats-ribbon>div{padding:25px 10%;border-inline-end:1px solid #273449;display:flex;gap:15px;align-items:center}.stats-ribbon span{color:var(--lime);font:12px 'IBM Plex Mono',monospace}.stats-ribbon b{font-size:13px}.section{max-width:1450px;margin:auto;padding:115px 4%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:35px}.section-heading h2,.feature-copy h2,.cta h2{font-size:clamp(34px,3.4vw,56px);line-height:1.2;letter-spacing:-1.4px;margin:20px 0}.section-heading p,.feature-copy p,.cta p{color:var(--muted);font-size:16px}.text-link{font-size:13px;color:var(--lime);font-weight:800}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.module{background:linear-gradient(145deg,#141f30,#0e1726);border:1px solid #2b3950;padding:28px;border-radius:13px;min-height:270px;transition:transform .25s,border .25s,box-shadow .25s}.module:hover{transform:translateY(-7px);border-color:#c4ff68a0;box-shadow:0 25px 50px #0004}.module-top,.module-bottom{display:flex;justify-content:space-between;align-items:center}.module-number,.module-bottom{font:11px 'IBM Plex Mono',monospace;color:#9cadc1}.module-icon{display:grid;place-items:center;width:48px;height:48px;background:#c4ff6812;border:1px solid #c4ff6844;border-radius:12px;color:var(--lime);font-size:28px}.module h3{font-size:23px;margin:23px 0 7px}.module p{color:var(--muted);font-size:13px}.module-bottom{margin-top:28px;border-top:1px solid #ffffff14;padding-top:18px}.module-bottom span:last-child{color:var(--lime);font-size:18px}.feature-section{padding:100px max(4%,calc((100vw - 1400px)/2));background:#101b2c;border-block:1px solid #273449;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.feature-copy p{line-height:1.9;margin-bottom:30px}.editor-preview,.lab-panel{background:#0c1422;border:1px solid #34425b;border-radius:13px;overflow:hidden;box-shadow:0 30px 70px #0004}.editor-preview pre{font:15px/2 'IBM Plex Mono',monospace;direction:ltr;text-align:left;padding:26px;white-space:pre-wrap}.purple{color:#b7a2ff}.number{color:#ffcc8e}.comment{color:#70849c}.preview-result{border-top:1px solid #273449;padding:18px 24px;font:12px/2 'IBM Plex Mono',monospace;color:#a9b9cc}.preview-result>span{color:var(--lime)}.cta{text-align:center;padding:110px 20px;max-width:900px;margin:auto}.cta p{margin-bottom:30px}footer{border-top:1px solid #263349;padding:35px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:12px}.footbrand{font-size:16px;color:var(--text)}.footbrand .brand-symbol{width:32px;height:32px;font-size:23px}.inner-heading{max-width:1380px;margin:auto;padding:75px 4% 45px}.inner-heading h1{font-size:clamp(38px,4vw,64px);letter-spacing:-1.5px;line-height:1.2;margin:18px 0}.inner-heading p{color:var(--muted);font-size:17px}.level-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.level-tags a{border:1px solid #34425b;background:#152033;padding:10px 15px;border-radius:8px;color:#c6d4e4;font:11px 'IBM Plex Mono',monospace}.level-tags a:hover{border-color:var(--lime)}.catalog{max-width:1380px;margin:0 auto;padding:10px 4% 110px}.catalog-section{margin-bottom:40px;background:#101a2a;border:1px solid #28374d;border-radius:14px;overflow:hidden;scroll-margin-top:100px}.catalog-heading{display:flex;align-items:center;gap:22px;padding:25px 30px;border-bottom:1px solid #28374d}.catalog-heading h2{margin:0;flex:1;font-size:22px}.catalog-heading>span:last-child{color:var(--muted);font:11px 'IBM Plex Mono',monospace}.catalog-list{display:grid;grid-template-columns:repeat(2,1fr)}.catalog-list>a{display:flex;align-items:center;gap:17px;padding:19px 25px;border-bottom:1px solid #233148;border-inline-end:1px solid #233148;transition:background .2s}.catalog-list>a:hover{background:#1a2a40}.lesson-index{font:12px 'IBM Plex Mono',monospace;color:var(--lime);border:1px solid #4b6748;padding:9px;border-radius:8px}.catalog-list b,.catalog-list small{display:block}.catalog-list b{font-size:14px}.catalog-list small{font-size:11px;color:var(--muted);margin-top:3px}.arrow{margin-inline-start:auto;color:var(--lime)}.progressbox{background:#142137;border:1px solid #314158;border-radius:12px;padding:20px;display:flex;align-items:center;gap:20px;max-width:700px;margin-top:30px}.progressbox>div:first-child{min-width:140px}.progressbox b,.progressbox span{display:block}.progressbox span{color:var(--muted);font-size:12px}.progressbar{height:7px;background:#2a3a50;border-radius:10px;flex:1;overflow:hidden}.progressbar span{height:100%;display:block;background:var(--lime)}.workspace{display:grid;grid-template-columns:250px minmax(0,1fr) 240px;max-width:1700px;margin:auto;min-height:calc(100vh - 180px)}.workspace-sidebar{border-inline-end:1px solid #26364a;padding:30px 16px;background:#0d1625}.workspace-sidebar h3{margin:15px 0 25px}.sidebar-links{max-height:75vh;overflow:auto}.sidebar-module{color:var(--lime);font-size:11px;font-weight:800;padding:20px 10px 7px}.sidebar-links a{display:block;padding:9px 11px;font-size:12px;color:#9dadc2;border-radius:7px}.sidebar-links a.selected,.sidebar-links a:hover{color:var(--lime);background:#233248}.sidebar-back{display:block;margin-top:20px;font-size:12px;color:var(--muted)}.workspace-main{padding:50px clamp(22px,4vw,65px);max-width:100%}.lesson-meta{display:flex;justify-content:space-between;gap:15px;font:11px 'IBM Plex Mono',monospace;color:var(--muted)}.workspace-main h1{font-size:clamp(32px,3vw,52px);line-height:1.25;margin:25px 0 8px}.lesson-intro{color:var(--muted)}.lesson-section{border-top:1px solid #28364b;padding:32px 0;margin-top:35px}.lesson-section h2,.quiz h2{font-size:26px;margin:15px 0}.lesson-section>p{color:#b7c5d8;font-size:17px;line-height:2.2}.lesson-code{background:#0b1422;padding:25px;border:1px solid #32415a;border-radius:0 0 10px 10px;direction:ltr;text-align:left;white-space:pre-wrap;overflow:auto;font:13px/1.9 'IBM Plex Mono',monospace;margin:0}.copy{background:transparent;border:0;color:var(--lime);padding:15px}.quiz{padding:30px;background:#111e30;border:1px solid #334359;border-radius:14px}.quiz>p{font-size:17px}.option{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #34445c;border-radius:9px;margin:10px 0;cursor:pointer;background:#101929;transition:background .2s,border .2s}.option:has(input:checked),.option:hover{border-color:var(--lime);background:#243329}.option input{accent-color:var(--lime)}.option-letter{font:12px 'IBM Plex Mono',monospace;color:var(--lime)}.quiz-submit{margin-top:15px}.quiz-feedback{min-height:22px;font-weight:800}.quiz-feedback.error{color:#ff9c9c}.quiz-feedback.good{color:var(--lime)}.success{margin-top:16px;color:var(--lime);display:flex;gap:15px;align-items:center}.success a{border-bottom:1px solid var(--lime)}.preview-gate{border:1px dashed #5a7450;border-radius:12px;padding:28px;text-align:center}.preview-gate>span{font-size:42px;color:var(--lime)}.preview-gate p{color:var(--muted)}.lesson-navigation{display:flex;justify-content:space-between;gap:15px;margin:35px 0}.disabled{opacity:.25;pointer-events:none}.workspace-info{border-inline-start:1px solid #26364a;padding:30px 15px}.info-card{border:1px solid #314056;border-radius:12px;padding:20px;background:#111d2f}.info-card h3{margin:15px 0}.info-card>a{display:block;border-top:1px solid #293a50;padding:14px 0;font-size:13px;color:var(--lime)}.info-card p{color:var(--muted);font-size:12px}.lab-heading{padding-bottom:20px}.lab-layout{max-width:1500px;margin:0 auto 100px;padding:0 4%;display:grid;grid-template-columns:1fr 1fr;gap:18px}.editor-area{display:flex;min-height:360px}.line-numbers{padding:24px 10px 24px 20px;background:#0e1929;color:#607189;font:14px/1.8 'IBM Plex Mono',monospace}.editor-area textarea{flex:1;resize:vertical;min-height:360px;background:#0c1422;border:0;color:#d3f1be;outline:none;padding:24px;font:14px/1.8 'IBM Plex Mono',monospace}.lab-controls{display:flex;gap:10px;padding:18px;border-top:1px solid #29394f}.schema-box{padding:20px;border-top:1px solid #29394f;color:var(--muted);font:12px/2 'IBM Plex Mono',monospace}.schema-box b{color:var(--lime)}.schema-box div{display:flex;justify-content:space-between;gap:10px}.schema-box small{font-size:10px}.result{padding:20px;overflow:auto;color:var(--muted);font-size:13px}.result table,.table-scroll table{width:100%;border-collapse:collapse;text-align:start}.result td,.result th,.table-scroll td,.table-scroll th{padding:12px;border-bottom:1px solid #29394f;text-align:start}.result th,.table-scroll th{color:var(--lime);font-size:11px}.table-scroll{overflow:auto}.admin-table{max-width:1300px;margin:0 auto 100px}.metrics{display:flex;gap:25px}.metrics>div{border:1px solid #34445c;background:#111c2c;padding:20px 35px;border-radius:10px}.metrics b,.metrics span{display:block}.metrics b{font-size:30px;color:var(--lime)}.metrics span{color:var(--muted);font-size:12px}.auth-wrap{max-width:1350px;margin:0 auto;min-height:76vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:70px 4%}.auth-side h1{font-size:clamp(40px,4vw,64px);line-height:1.15;margin:24px 0}.auth-side em{font-style:normal;color:var(--lime)}.auth-side p{color:var(--muted);font-size:17px}.auth-decoration{font-size:120px;color:var(--lime);opacity:.55;margin-top:60px}.auth-decoration span{font:14px 'IBM Plex Mono',monospace}.auth-card{background:#111e30;border:1px solid #35445c;border-radius:15px;padding:45px;box-shadow:0 30px 70px #0006}.auth-card h2{font-size:34px;margin:15px 0 4px}.auth-card p{color:var(--muted)}.auth-card label{display:block;margin:18px 0;color:#c4d0e1;font-size:13px;font-weight:700}.auth-card input{display:block;width:100%;background:#0b1422;border:1px solid #35445c;border-radius:8px;color:var(--text);padding:14px;margin-top:8px;outline:none}.auth-card input:focus{border-color:var(--lime)}.switch{text-align:center;font-size:13px;margin-top:22px}.switch a{color:var(--lime)}.flash{max-width:1000px;margin:18px auto;padding:14px 20px;background:#1d3024;border:1px solid #719451;color:var(--lime);border-radius:9px}
@media(max-width:1150px){.hero{grid-template-columns:1fr;gap:35px}.hero-machine{max-width:650px;width:100%;margin:auto}.workspace{grid-template-columns:220px minmax(0,1fr)}.workspace-info{display:none}.main-nav{gap:14px}.user-chip{display:none}}@media(max-width:750px){.top{padding:12px 4%;flex-wrap:wrap;gap:12px}.brand{font-size:17px}.brand-symbol{width:36px;height:36px}.main-nav{order:3;width:100%;justify-content:center;border-top:1px solid #263449;padding-top:10px}.nav-actions{gap:8px}.hero{padding:60px 5%;min-height:0}.hero h1{font-size:42px;letter-spacing:-1px}.hero-copy>p{font-size:15px}.hero-machine{min-height:410px}.machine-grid{height:330px}.node-a{left:2%;top:190px}.node-b{right:2%;top:190px}.node-c{top:265px}.db-node{min-width:100px;padding:8px}.connectors{height:330px}.stats-ribbon{grid-template-columns:repeat(2,1fr)}.stats-ribbon>div{padding:18px}.module-grid{grid-template-columns:1fr}.section{padding:70px 5%}.section-heading{display:block}.feature-section,.auth-wrap,.lab-layout{grid-template-columns:1fr;padding:55px 5%}.catalog-list{grid-template-columns:1fr}.catalog-heading{flex-wrap:wrap}.workspace{display:block}.workspace-sidebar{border-bottom:1px solid #29394f;border-inline-end:0;padding:20px}.sidebar-links{max-height:170px;overflow:auto}.workspace-main{padding:30px 5%}.lesson-meta{font-size:9px}.workspace-info{display:none}.auth-side{display:none}.auth-card{padding:25px}.hero-proof{flex-wrap:wrap}.feature-copy h2{font-size:36px}footer{flex-wrap:wrap}.metrics{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}