:root { color-scheme: dark; --bg:#0c0e13; --card:#171a20; --panel:#1c2028; --raised:#252933; --txt:#f6f6f7; --muted:#aeb1bb; --orange:#e98c5e; --orangeSoft:#ffb18d; --border:#353843; --ok:#81d7ac; --shadow:0 22px 62px #0007; }
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#46281f65 0%,transparent 32%),radial-gradient(ellipse at 4% 15%,#323a4640 0%,transparent 24%),var(--bg);color:var(--txt);font:15px/1.65 system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;min-height:100vh}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffb18d;outline-offset:3px}a{color:inherit}.shell{max-width:1260px;padding:0 28px;margin:0 auto}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #ffffff16}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:13px;letter-spacing:.11em;font-weight:800}.mark{display:grid;place-items:center;background:linear-gradient(145deg,#f5a579,#dd7353);color:#101115;border-radius:15px;width:50px;height:50px;box-shadow:0 8px 22px #0004}.mark svg{width:33px;height:33px}.navtools{display:flex;gap:12px;align-items:center}.switch{display:flex;gap:5px;padding:5px;border:1px solid #ffffff1a;border-radius:13px;background:#151820}.switch button{background:transparent;color:#aeb1bb;border:0;padding:8px 12px;border-radius:9px;font-weight:750;line-height:1.2}.switch button[aria-pressed=true]{background:#ffad8760;color:#fff;box-shadow:inset 0 0 0 1px #f59966}.hero{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:54px;padding:74px 0 56px}.eyebrow{color:#eca179;font-size:12px;letter-spacing:.2em;font-weight:900}.hero h1{font-size:clamp(41px,6.5vw,83px);line-height:1.06;letter-spacing:-.06em;font-weight:850;margin:22px 0}.hero h1 span{color:#eda17a}.hero .lead{color:#b4b8c2;max-width:700px;font-size:19px;line-height:1.7}.hero-note{background:linear-gradient(145deg,#252124,#17181c);padding:26px 29px;border:1px solid #d88c5544;border-radius:23px;box-shadow:var(--shadow);align-self:center}.info-ic{display:grid;place-items:center;border-radius:50%;height:40px;width:40px;font-size:23px;font-weight:900;color:#141417;background:var(--orange);margin-bottom:12px}.hero-note strong{font-size:19px}.hero-note p{color:#bfc0c5;margin:11px 0 0}.divider{border-top:1px solid #ffffff1b}.kicker{color:#9fa4b1;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800}.guidebar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:28px 0}.guidebar h2{font-size:26px;margin:4px 0;font-weight:780}.guidebar .right{display:flex;gap:9px;align-items:center}.device-switch button{padding:10px 19px}.outline{border:1px solid #61504d;background:transparent;color:#eeddd2;padding:11px 17px;border-radius:11px;font-weight:750}.outline:hover{background:#e98c5e19}.contentgrid{display:grid;grid-template-columns:minmax(218px,.31fr) minmax(0,1fr);gap:25px;align-items:start}.steps-sidebar{background:#17191f;border:1px solid var(--border);border-radius:21px;padding:12px;position:sticky;top:16px}.sidebarheading{display:flex;justify-content:space-between;padding:8px 13px 12px;color:#a7adba;font-size:12px;font-weight:800;letter-spacing:.1em}.stepbtn{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:1px solid transparent;border-radius:12px;text-align:start;color:#c8c8d0;padding:13px 12px;transition:.15s}.stepbtn.active{background:#523a3160;border-color:#e98c5e63;color:#fff}.stepbtn:hover:not(.active){background:#ffffff0a}.stepnum{width:31px;height:31px;border-radius:10px;background:#35333a;color:#efd6ca;display:grid;place-items:center;font-weight:850;flex-shrink:0}.stepbtn.active .stepnum{background:#ef935f;color:#15151a}.stepbtn .name{line-height:1.3;font-size:13px;font-weight:700;flex:1}.tick{color:var(--ok);font-size:19px}.viewer{background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.viewer-head{padding:28px 31px 22px;display:flex;justify-content:space-between;gap:12px;align-items:start}.current-kicker{color:var(--orangeSoft);font-size:12px;font-weight:850;letter-spacing:.16em}.viewer-head h3{font-size:clamp(25px,3vw,34px);letter-spacing:-.035em;margin:5px 0 0;line-height:1.3}.count{font-weight:900;font-size:14px;color:#d7d7de;white-space:nowrap;border:1px solid #ffffff21;border-radius:50px;padding:8px 14px}.progress{height:4px;background:#37363b}.progressfill{height:100%;background:linear-gradient(90deg,#d86c4a,#ffac7d);width:16.66%;transition:width .2s}.stage{padding:29px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr);gap:25px}.visualbox{background:radial-gradient(ellipse at 50% 24%,#454255 0%,#22242e 60%);min-height:390px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;border-radius:15px;border:1px solid #ffffff16;padding:20px;overflow:hidden}.visualbox img{display:block;max-width:100%;max-height:505px;width:auto;height:auto;border-radius:10px;box-shadow:0 12px 36px #0009;object-fit:contain}.zoomaction{background:#191d23d9;color:#f0f0f2;border:1px solid #ffffff3d;border-radius:12px;padding:9px 15px;font-weight:750;display:flex;gap:8px;align-items:center}.zoomaction:hover{border-color:#e98c5e}.howto{display:flex;flex-direction:column;justify-content:center;gap:14px}.howto small{font-size:12px;letter-spacing:.12em;color:var(--orangeSoft);font-weight:900}.howto .explain{font-size:20px;line-height:1.65;margin:0}.tip{color:#b4b7bd;font-size:14px;background:#26262b;padding:16px 18px;border-radius:13px;border-inline-start:3px solid #e98c5e}.optional-pill{color:#f7d2b8;background:#e98c5e24;font-size:12px;font-weight:850;padding:6px 10px;border-radius:60px;display:inline-flex;width:max-content}.donebox{display:flex;gap:10px;align-items:center;color:#dbdde1;font-size:13px;cursor:pointer;padding:9px 0}.donebox input{accent-color:#e78c5b;width:19px;height:19px}.stagefoot{padding:18px 28px;border-top:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;gap:12px}.stagefoot button{border:1px solid #ffffff33;border-radius:11px;background:#2d3039;color:#fff;font-weight:760;padding:11px 18px}.stagefoot button.primary{background:#ec966c;color:#1d1a19;border-color:#ec966c}.stagefoot button:disabled{opacity:.4;cursor:not-allowed}.softnote{padding:16px 4px;color:#8e95a0;font-size:12px}.endcap{margin:58px 0 45px;background:linear-gradient(90deg,#1f2528,#271f1e);border:1px solid #694a3c;border-radius:22px;display:flex;align-items:center;gap:20px;padding:28px 31px}.endcap .orb{font-size:25px;font-weight:900;display:grid;place-items:center;width:55px;height:55px;border-radius:50%;background:#ed9368;color:#15151a}.endcap h3{font-size:19px;margin:0 0 7px}.endcap p{color:#c2c1c3;margin:0}.footer{border-top:1px solid #ffffff16;color:#8e95a0;padding:26px 0 44px;display:flex;align-items:center;justify-content:space-between;font-size:12px}.footer a{text-decoration:none;color:#ecac89}.modal{border:1px solid #76645e;background:#18191f;border-radius:18px;box-shadow:0 24px 100px #000e;max-width:min(96vw,1110px);width:fit-content;max-height:96vh;padding:20px;color:#fff}.modal::backdrop{background:#030305df;backdrop-filter:blur(9px)}.modaltoolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:12px}.modaltoolbar span{font-weight:800;color:#fff}.modal button{background:#38333a;border:1px solid #ffffff32;border-radius:10px;color:#fff;padding:8px 14px}.modal img{max-width:min(90vw,1020px);max-height:83vh;object-fit:contain;display:block;margin:auto;border-radius:10px}.posterfoot{display:flex;justify-content:flex-end;padding-top:12px}.posterfoot a{color:#ffae85}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}body[dir=rtl] .stepbtn{text-align:right}body[dir=rtl] .tip{border-inline-start:3px solid #e98c5e}body[dir=rtl] .hero h1{letter-spacing:-.02em}body[dir=rtl] .eyebrow{letter-spacing:0}body[dir=rtl] .current-kicker{letter-spacing:0}@media(max-width:960px){.shell{padding:0 18px}.hero{grid-template-columns:1fr;gap:15px;padding:44px 0}.hero-note{max-width:700px}.stage{grid-template-columns:1fr}.howto .explain{font-size:18px}.steps-sidebar{position:static}.contentgrid{grid-template-columns:1fr}.steps-sidebar{display:grid;grid-template-columns:repeat(3,1fr)}.sidebarheading{grid-column:1/-1}.stage{gap:18px}.visualbox img{max-height:480px}.viewer-head{padding:24px}}@media(max-width:610px){.topbar{height:auto;padding:17px 0;align-items:flex-start;flex-direction:column}.brand{font-size:11px}.navtools{align-self:stretch}.navtools .switch{width:100%;justify-content:space-around}.switch button{padding:8px}.hero h1{font-size:44px}.hero .lead{font-size:16px}.guidebar{align-items:flex-start;flex-direction:column}.guidebar .right{width:100%;justify-content:space-between}.device-switch{flex:1}.device-switch button{flex:1}.steps-sidebar{grid-template-columns:1fr 1fr}.stepbtn{padding:9px 7px;gap:7px}.stepnum{height:25px;width:25px;border-radius:8px}.stepbtn .name{font-size:11px}.viewer-head{padding:19px}.viewer-head h3{font-size:24px}.stage{padding:16px}.visualbox{min-height:260px;padding:13px}.visualbox img{max-height:470px}.stagefoot{padding:16px}.stagefoot button{padding:10px;font-size:13px}.endcap{padding:18px}.footer{flex-direction:column;align-items:flex-start;gap:4px}.modal{padding:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.navtools,.steps-sidebar,.guidebar .right,.zoomaction,.stagefoot,.donebox,.footer{display:none!important}.contentgrid,.stage{display:block}.shell{max-width:100%;padding:0}.hero{padding:12px 0 15px}.visualbox{box-shadow:none}.viewer{box-shadow:none}}

#posterButton,#posterDownloadBox{display:none!important}.mark img{width:100%;height:100%;object-fit:cover;border-radius:15px}.privacy-arrow{position:absolute;right:16px;top:14px;color:#ef935f;font-size:30px;pointer-events:none}.visualbox{position:relative}
[hidden]{display:none!important}

.screenshot-frame{position:relative;display:inline-flex;max-width:100%}#focusArrow{position:absolute;color:#ff9c63;font-size:32px;font-weight:900;line-height:34px;z-index:2;pointer-events:none;filter:drop-shadow(0 1px 2px #000)}

/* Keep numeric progress in reading order within Arabic RTL. */
.count{direction:ltr;unicode-bidi:isolate}

#stepList{display:contents}