@font-face{font-family:Arabic;src:url('tajawal-regular.ttf') format('truetype');font-weight:100 400;font-display:swap}
@font-face{font-family:Arabic;src:url('tajawal-medium.ttf') format('truetype');font-weight:450 600;font-display:swap}
@font-face{font-family:Arabic;src:url('tajawal-bold.ttf') format('truetype');font-weight:650 900;font-display:swap}
[hidden]{display:none!important}
:root{color-scheme:dark;--bg:#071511;--ink:#eff8f2;--muted:#9fbaae;--mint:#a3f7cb;--line:rgba(193,238,213,.16);--panel:rgba(19,40,31,.72);--font:Arabic,'Segoe UI',Tahoma,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:6px}button:disabled{opacity:.25;cursor:default}button,svg{flex-shrink:0}button svg{width:20px;height:20px}h1,h2,h3,p{margin:0}button{border:0}em{font-style:normal;color:var(--mint)}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 13% 42%,#18433255,transparent 50%),radial-gradient(ellipse at 85% 0,#205c2722,transparent 50%);z-index:-1}.header{height:106px;padding:0 4.3vw;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);position:relative;z-index:4}.brand{display:flex;align-items:center;gap:12px;font-size:32px;font-weight:750;line-height:1.15}.brand-mark{font:54px/1 Arial;color:var(--mint)}.brand-sub{display:block;font-size:12px;letter-spacing:0;font-weight:400;color:var(--muted);margin-top:6px}.chapters{display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:50px;background:#16332855}.chapters a{font-size:14px;padding:8px 17px;border-radius:40px;color:var(--muted);transition:background .2s,color .2s}.chapters a:hover{color:white}.chapters a[aria-current]{background:#d2f5df;color:#12241a}.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:transparent;font-size:14px;min-width:44px;min-height:44px}.fullscreen{color:#d3e0d9}.mono{font-family:Arial,sans-serif;letter-spacing:1.5px;direction:ltr}.js main{height:calc(100svh - 195px);min-height:570px}.slide{position:relative;max-width:1700px;width:100%;margin:auto;min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6vw;padding:55px 7vw 75px;isolation:isolate}.js .slide{height:100%;min-height:0}.js .slide:not(.active){display:none}.slide.active .slide-content,.slide.active .visual-panel{animation:reveal .65s cubic-bezier(.2,.7,.2,1) both}.slide.active .visual-panel{animation-delay:.08s}.slide-content{position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:15px;color:var(--mint);font-size:14px;font-weight:500;letter-spacing:.2px;margin-bottom:27px}.small-line{display:inline-block;width:26px;height:1px;background:var(--mint)}.separator{opacity:.35;margin:0 2px}h1{font-size:clamp(52px,5.7vw,90px);font-weight:650;line-height:1.3;letter-spacing:-2px}h2{font-size:clamp(42px,4.4vw,70px);line-height:1.4;font-weight:600;letter-spacing:-1.5px}.hero-sub{font-size:25px;font-weight:500;margin-top:18px}.intro{font-size:18px;color:var(--muted);line-height:1.9;margin-top:22px}.primary{display:flex;align-items:center;justify-content:space-between;gap:38px;border-radius:7px;padding:14px 23px;margin-top:32px;background:var(--mint);color:#0b2919;font-weight:650;box-shadow:0 5px 30px #a3f7cb14;transition:transform .2s,background .2s}.primary:hover{transform:translateY(-3px);background:#ccffdf}.primary span{font:26px/1 Arial}.hero-meta{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin-top:20px}.hero-meta i{height:3px;width:3px;border-radius:50%;background:var(--muted)}.hero-art{position:absolute;left:0;top:0;width:65%;height:100%;z-index:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to right,black 65%,transparent)}.hero-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;transform:scale(1.16);animation:float 12s ease-in-out infinite;filter:saturate(.85)}.art-caption{position:absolute;left:14%;bottom:19%;display:flex;align-items:center;gap:12px;color:#c2e0cc;font-size:13px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px #9fffbc77;flex-shrink:0}.caption-line{width:50px;height:1px;background:#6da58266}.process-strip{position:absolute;bottom:22px;right:7vw;left:7vw;display:flex;align-items:center;gap:23px;font-size:14px;border-top:1px solid var(--line);padding-top:20px;color:#d0e2d5}.process-strip b{font:18px Arial;color:#50735f}.process-strip small{margin-right:auto;color:var(--muted);font-size:12px}.visual-panel{border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#23453677,#10291c99);box-shadow:0 30px 100px #0002,inset 0 1px #f0fff507;backdrop-filter:blur(14px);padding:28px;position:relative;overflow:hidden;min-width:0}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#bcd2c2;margin-bottom:30px}.panel-top .mono{font-size:10px;color:#688d77;letter-spacing:1px}.data-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.data-card{padding:25px 18px;border:1px solid var(--line);border-radius:14px;background:#0b211777;display:flex;flex-direction:column;align-items:flex-start}.data-symbol{font-size:56px;line-height:1.2;color:var(--mint);height:80px;font-weight:300}.data-card p{color:var(--mint);font-size:13px;margin-bottom:6px}.data-card h3{font-size:22px;font-weight:550}.data-example{display:flex;gap:7px;align-items:center;margin-top:20px;font-size:14px;color:#dbe7df;flex-wrap:wrap}.data-example b{font:16px Arial;direction:ltr}.color-dot{width:12px;height:12px;background:#50b875;border-radius:50%;box-shadow:0 0 18px #3fc07166}.data-card small{color:var(--muted);font-size:12px;margin-top:7px}.panel-bottom{margin-top:28px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:10px}.insight{margin-top:30px;border-right:2px solid var(--mint);padding:3px 18px}.insight span{font-size:12px;color:var(--mint)}.insight p{font-size:18px;margin-top:5px;line-height:1.8}.variables{margin:24px 0 0;max-width:470px}.variables>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}.variables dt{display:flex;align-items:center;gap:14px}.variables dt span{font:11px Arial;letter-spacing:1px;color:#688b74}.variables dd{margin:0;color:var(--muted)}.experiment-panel{padding:24px 30px}.experiment-panel .panel-top{margin-bottom:20px}.experiment-readout{display:flex;justify-content:space-between;align-items:center}.experiment-readout small{display:block;font-size:12px;color:var(--muted)}.experiment-readout output{font:56px/1.3 Arial;display:block;color:var(--mint);direction:ltr;text-align:right}.experiment-tag{font-size:12px;border:1px solid #91f6c32b;background:#80ce9a0a;border-radius:20px;padding:5px 13px;color:var(--mint)}.beaker{display:block;width:100%;height:180px}.slider-wrap label{display:block;font-size:13px;color:#d2e6d9;margin-bottom:10px}.slider-wrap input{width:100%;accent-color:var(--mint);cursor:pointer;direction:ltr;height:18px}.range-labels{display:flex;justify-content:space-between;direction:ltr;color:var(--muted);font-size:12px}.experiment-note{margin-top:17px;font-size:13px;line-height:1.8}.simulation-label{display:block;font-size:11px;color:#8fab99;margin-top:7px}.salt{transform-box:fill-box;transform-origin:center;transition:transform .5s,opacity .5s}.flow-start{margin:20px auto 0;text-align:center;border:1px solid #93e9b744;border-radius:12px;padding:18px;background:#8ff2b30a;max-width:250px}.flow-start span{display:block;font:26px Arial;color:var(--mint);margin-top:15px}.branches{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:22px}.branches article{padding:22px 12px;border:1px solid var(--line);border-radius:14px;text-align:center}.branch-icon{font:30px Arial;color:var(--mint);display:inline-grid;place-items:center;background:#a0f9c210;width:48px;height:48px;border-radius:50%;margin-bottom:15px}.branches h3{font-size:17px;font-weight:500}.branches p{font-size:14px;color:var(--muted);margin-top:10px}.uv-line{display:flex;gap:10px;align-items:center;justify-content:center;font-size:14px;color:#dbe2be;padding:12px 0 25px}.sun-icon{font:30px Arial;color:#e2e6a1}.reaction{direction:ltr;display:flex;justify-content:center;align-items:center;gap:8px;padding:23px 0}.reaction b{font:17px Arial;font-weight:400;color:#93b2a0}.chem{font:19px Arial;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:57px;height:57px;border:1px solid #b5f2ce44;background:radial-gradient(circle at 30% 20%,#a5e8b955,#25513d55 45%,#0c2319);box-shadow:inset -5px -6px 13px #0005,0 5px 12px #0002;color:#edfff3}.chem.oxygen{background:radial-gradient(circle at 30% 20%,#aadff866,#24455988 45%,#0b1b2a);border-color:#80c3e144;color:#c5e8fa}.chem.compound{border-radius:25px;width:65px;background:linear-gradient(125deg,#487c5b77,#24455988)}.secondary{border-top:1px dashed var(--line)}.cycle-line{display:flex;align-items:center;gap:16px;margin-top:18px;padding:20px 0 0;border-top:1px solid var(--line)}.cycle-line>span{font:44px Arial;color:var(--mint)}.cycle-line strong{font-weight:550;font-size:17px}.cycle-line p{font-size:13px;color:var(--muted);margin-top:4px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:12px 0 28px}.comparison article+article{border-right:1px solid var(--line);padding-right:20px}.comparison-word{font-size:43px;line-height:1.4;color:var(--mint);font-weight:550}.comparison h3{font-size:19px;font-weight:500;margin-top:15px}.comparison p{font-size:13px;color:var(--muted);margin-top:5px}.quiz{border-top:1px solid var(--line);padding-top:22px}.quiz-label{font-size:12px;color:var(--mint)}.quiz h3{font-size:20px;font-weight:500;margin-top:7px}.quiz button{background:transparent;padding:12px 0;color:var(--muted);font-size:13px;display:flex;gap:20px;align-items:center}.quiz button:hover{color:var(--mint)}#answer{font-size:15px;color:var(--mint);padding:10px 13px;border-radius:9px;background:#a3f7cb0c}.footer{height:86px;margin:0 4.3vw;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line)}.footer-info{display:flex;gap:22px;align-items:center}.footer-info .mono{font-size:18px;color:var(--mint)}.footer-info .mono span{color:#668472;font-size:13px}.footer-label{font-size:13px;color:var(--muted)}.progress-dots{display:flex;gap:8px;direction:rtl}.progress-dots a{height:32px;width:26px;display:grid;place-items:center}.progress-dots a:after{content:'';height:4px;width:20px;background:#2d4b3a;border-radius:9px;transition:background .3s}.progress-dots a[aria-current]:after{background:var(--mint)}.footer-controls{display:flex;gap:10px;align-items:center}.notes-button{display:flex;align-items:center;gap:8px;background:none;color:var(--muted);font-size:13px;padding:10px 0;margin-left:22px}.notes-button:hover{color:var(--mint)}.arrow-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:none;font:23px Arial}.arrow-button:not(:disabled):hover{background:#a3f7cb22}.arrow-button.next{background:#a3f7cb;color:#0c291b;border-color:transparent}.bottom-progress{height:3px;background:#183422}.bottom-progress span{display:block;width:16.666%;height:100%;background:var(--mint);transition:width .5s}dialog{max-width:620px;width:calc(100% - 32px);max-height:85svh;overflow:auto;border:1px solid #729d8266;border-radius:22px;background:#11251b;color:var(--ink);padding:32px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#020a07bd;backdrop-filter:blur(9px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head .eyebrow{margin:0}dialog h2{font-size:28px;letter-spacing:0;margin:15px 0}#notes-text{font-size:19px;line-height:2.1;color:#d1e1d6}#memory-words{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}#memory-words span{border:1px solid var(--line);background:#a3f7cb0a;border-radius:25px;padding:5px 16px;font-size:14px;color:var(--mint)}dialog small{font-size:12px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;top:-100px;right:20px;z-index:20;background:var(--mint);color:#071511;padding:10px 20px;border-radius:5px}.skip:focus{top:10px}.noscript{padding:20px;text-align:center}.no-js .footer{display:none}@keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{transform:scale(1.16) translateY(0)}50%{transform:scale(1.19) translateY(-12px)}}
@media(min-width:1600px){.slide{padding-right:100px;padding-left:100px}.process-strip{right:100px;left:100px}}
@media(max-width:1100px){.header{padding:0 4vw;height:90px}.chapters a{padding:8px 11px;font-size:12px}.fullscreen span{display:none}.brand{font-size:27px}.brand-mark{font-size:45px}.slide{padding:35px 5vw 75px;gap:4vw}.js main{height:calc(100svh - 179px);min-height:575px}h1{font-size:64px}h2{font-size:48px}.intro{font-size:17px}.visual-panel{padding:22px}.data-pair{gap:10px}.data-card{padding:19px 12px}.data-card h3{font-size:20px}.process-strip{right:5vw;left:5vw}.chem{width:45px;height:45px;font-size:17px}.chem.compound{width:52px}.reaction{gap:6px}.panel-top .mono{font-size:9px}.footer{margin:0 4vw}}
@media(max-width:760px){.header{height:83px;gap:12px;flex-wrap:wrap;padding:12px 5vw;align-content:center}.brand{font-size:26px}.brand-mark{font-size:40px}.brand-sub{font-size:10px}.chapters{order:3;position:absolute;top:94px;left:5vw;right:5vw;justify-content:space-between;gap:0;padding:4px}.chapters a{font-size:11px;padding:6px 8px}.js main{height:auto;min-height:calc(100svh - 169px)}.slide,.js .slide{height:auto;min-height:calc(100svh - 169px);grid-template-columns:1fr;padding:90px 6vw 35px;gap:28px;align-content:start}.eyebrow{font-size:12px;margin-bottom:17px;gap:10px}h1{font-size:clamp(48px,11vw,76px);letter-spacing:-1px}h2{font-size:clamp(39px,8.8vw,58px);letter-spacing:-1px;line-height:1.35}.intro{font-size:16px;margin-top:16px}.hero-sub{font-size:20px;margin-top:16px}.hero-copy{width:100%}.hero-art{width:100%;height:380px;left:-26%;top:160px;opacity:.65;mask-image:linear-gradient(to right,black 30%,transparent 93%)}.hero-art img{object-fit:contain;transform:scale(1.2)}.hero-copy .intro{max-width:270px;text-shadow:0 2px 14px #071511}.hero-copy h1{position:relative;z-index:1;text-shadow:0 3px 20px #07151177}.art-caption{display:none}.hero-copy .primary{margin-top:30px}.hero-meta{font-size:11px;margin-bottom:40px}.process-strip{position:relative;inset:auto;gap:12px;padding-top:16px;flex-wrap:wrap;font-size:13px;grid-column:1}.process-strip small{width:100%;margin:0;font-size:11px}.visual-panel{padding:22px;border-radius:18px}.panel-top .mono{font-size:9px}.panel-top{margin-bottom:22px}.insight{margin-top:20px}.insight p{font-size:16px}.variables>div{font-size:14px;padding:10px 0}.variables{max-width:none}.data-card{padding:23px 15px}.data-card h3{font-size:21px}.data-symbol{height:75px}.experiment-panel{padding:23px}.experiment-readout output{font-size:48px}.beaker{height:155px}.comparison-word{font-size:36px}.comparison h3{font-size:17px}.comparison p{font-size:12px}.quiz h3{font-size:18px}.footer{height:80px;margin:0 5vw;gap:10px}.footer-info{gap:0}.footer-label{display:none}.footer-info .mono{font-size:16px}.progress-dots{display:none}.notes-button{font-size:12px;margin-left:5px}.footer-controls{gap:9px}.arrow-button{width:37px;height:37px}.notes-button svg{width:17px}.bottom-progress{height:3px}dialog{padding:22px}#notes-text{font-size:17px}.chem{width:48px;height:48px}.chem.compound{width:55px}.reaction{gap:7px}.uv-line{font-size:13px;gap:8px}}
@media(max-width:360px){.chapters a{font-size:10px;padding:6px}.slide{padding-right:5vw;padding-left:5vw}.visual-panel{padding:16px}.data-card{padding:18px 10px}.data-card h3{font-size:18px}.data-example{font-size:12px}.reaction{gap:4px}.chem{width:40px;height:40px;font-size:15px}.chem.compound{width:47px}.panel-top .mono{letter-spacing:0}.notes-button{font-size:11px}.footer-controls{gap:6px}.hero-art{left:-22%;opacity:.45}}
@media(max-height:850px) and (min-width:761px){.slide{padding-top:28px;padding-bottom:65px}h1{font-size:64px;line-height:1.25}h2{font-size:48px}.eyebrow{margin-bottom:15px}.intro{margin-top:15px}.hero-sub{margin-top:10px}.primary{margin-top:22px}.hero-meta{margin-top:15px}.visual-panel{padding:22px}.beaker{height:145px}.experiment-panel .panel-top{margin-bottom:12px}}
@media(max-height:720px) and (min-width:761px){.header{height:80px}.js main{height:auto;min-height:560px}.slide,.js .slide{min-height:560px;height:auto}h1{font-size:62px}h2{font-size:46px}.beaker{height:130px}.footer{height:75px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-art img{transform:scale(1.16)}}
@media print{body{background:white;color:black}.header,.footer,.ambient,.hero-art,.bottom-progress,.notes-button,dialog,.primary,.quiz button{display:none!important}.js main{height:auto}.js .slide,.js .slide:not(.active){display:grid;height:auto;min-height:0;break-after:page;padding:30px;gap:25px}.visual-panel{background:#f3f6f3;box-shadow:none;border-color:#ccc}.slide *{color:#123321!important}.process-strip{position:relative;inset:auto;grid-column:1/-1}.slide-content h1,.slide-content h2{font-size:34px}.intro{font-size:16px}#answer[hidden]{display:block}}