
:root{--navy:#061936;--navy2:#08234b;--gold:#d2962a;--gold2:#ffc35a;--ink:#071a36;--muted:#667085;--line:#e7dccd;--sideW:72px;--sideWOpen:250px}
*{box-sizing:border-box;min-width:0}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,Arial,sans-serif;background:#fff;overflow-x:hidden;padding-left:var(--sideW);padding-bottom:32px;transition:padding-left .18s ease}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}img,svg{max-width:100%;display:block}body.navOpen{overflow:hidden}
.igNav{position:fixed;left:0;top:0;bottom:0;width:var(--sideW);background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-right:1px solid var(--line);z-index:99998;display:flex;flex-direction:column;gap:10px;padding:12px 10px;box-shadow:12px 0 40px rgba(15,23,42,.08);transition:width .18s ease;overflow:hidden}.igNav:hover{width:var(--sideWOpen)}body:has(.igNav:hover){padding-left:var(--sideWOpen)}.igNavBrand{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;border:1px solid rgba(15,23,42,.08);background:linear-gradient(135deg,#fff7fb,#eef7ff)}.igNavLogo{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#e95b9e,#76bfe5);display:grid;place-items:center;color:#fff;font-weight:900;flex:0 0 auto;box-shadow:0 10px 22px rgba(118,191,229,.28)}.igNavTitle{font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:.18s;color:rgba(15,23,42,.82)}.igNav:hover .igNavTitle{opacity:1;transform:translateX(0)}.igNavList{display:flex;flex-direction:column;gap:8px;margin-top:6px}.igNavLink{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;border:1px solid transparent;color:rgba(15,23,42,.85);font-weight:800;font-size:13px;transition:.16s;white-space:nowrap}.igNavLink:hover,.igNavLink.active{background:rgba(118,191,229,.12);border-color:rgba(118,191,229,.26)}.igIcon{width:40px;height:40px;border-radius:16px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.95);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 10px 26px rgba(15,23,42,.08)}.igIcon svg{width:18px;height:18px;fill:none;stroke:rgba(15,23,42,.82);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.igLabel,.igNavSmall{opacity:0;transform:translateX(-6px);transition:.18s}.igNav:hover .igLabel,.igNav:hover .igNavSmall{opacity:1;transform:translateX(0)}.igNavSpacer{flex:1}.igNavSmall{font-size:11px;color:#887d73;padding:0 10px 6px}.igBackdrop,.igToggle{display:none}
.siteBottomFoot{position:fixed;left:var(--sideW);right:0;bottom:0;z-index:99990;min-height:30px;padding:6px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#887d73;font-size:12px;background:rgba(251,247,239,.94);border-top:1px solid #eadfce;backdrop-filter:blur(10px);transition:left .18s ease}body:has(.igNav:hover) .siteBottomFoot{left:var(--sideWOpen)}
.pageShell{width:100%;min-height:100vh}.topNav{min-height:74px;background:linear-gradient(180deg,#061936,#07152c);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid rgba(255,255,255,.12);gap:18px}.logoLockup{display:flex;align-items:center;gap:14px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;flex:0 0 auto}.logoMark{width:52px;height:52px;border-radius:50%;border:3px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-weight:900;font-size:20px}.logoText{line-height:1.05}.logoText span{color:var(--gold)}.topLinks{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:800}.topLinks a{display:flex;gap:8px;align-items:center;opacity:.92}.topLinks a.active{color:var(--gold);border-bottom:4px solid var(--gold);height:74px;align-items:center}.topLinks svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2}.topSearch{width:260px;height:40px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);border-radius:999px;display:flex;align-items:center;padding:0 14px;color:rgba(255,255,255,.66)}.avatar{width:44px;height:44px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-weight:900}
.hero{background:radial-gradient(circle at 83% 15%,rgba(120,70,255,.32),transparent 28%),radial-gradient(circle at 50% 10%,rgba(17,102,210,.25),transparent 45%),linear-gradient(180deg,#071936 0%,#06162f 100%);color:#fff;display:grid;grid-template-columns:minmax(420px,.9fr) 1.5fr;gap:34px;padding:44px 70px 20px;min-height:320px;overflow:hidden;position:relative}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:26px 26px;opacity:.18}.heroLeft,.heroShowcase{position:relative;z-index:1}.hero h1{font-size:54px;line-height:.98;margin:0 0 18px;letter-spacing:-.045em}.hero h1 span{color:var(--gold2)}.hero p{font-size:20px;line-height:1.38;color:rgba(255,255,255,.88);max-width:560px;margin:0 0 30px}.searchLarge{width:540px;max-width:100%;height:54px;background:#fff;border-radius:9px;display:flex;align-items:center;gap:14px;color:#777;padding:0 18px;font-size:16px;box-shadow:0 14px 34px rgba(0,0,0,.15)}.searchLarge svg{width:24px;height:24px;fill:none;stroke:#061936;stroke-width:2}.heroShowcase{display:grid;grid-template-columns:210px 420px 150px 290px;gap:14px;align-items:center}.sidePills{display:grid;gap:12px}.sidePill{min-height:64px;background:#fff;border-radius:12px;color:#061936;display:flex;gap:12px;align-items:center;padding:12px;box-shadow:0 14px 30px rgba(0,0,0,.16);font-weight:900}.sidePill svg{width:28px;height:28px;fill:none;stroke:#061936;stroke-width:2;flex:0 0 auto}.sidePill small{display:block;font-weight:700;color:#5f6b7a}.screenCard{height:255px;border:5px solid #080b13;border-radius:12px;background:#fff;box-shadow:0 18px 44px rgba(0,0,0,.28);overflow:hidden}.screenHero{height:118px;background:linear-gradient(135deg,#103d1f,#0b1123);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}.screenBody{padding:12px;color:#111}.screenBody h3{font-size:18px;margin:0 0 8px}.screenBody p{font-size:11px;color:#555;margin:0}.phoneCard{height:255px;border:5px solid #111;border-radius:26px;background:#fff;color:#071936;padding:12px;box-shadow:0 18px 44px rgba(0,0,0,.26)}.phoneCard h4{font-size:13px;margin:0 0 10px}.phoneBtn{min-height:31px;background:#071936;color:#fff;border-radius:8px;margin:7px 0;padding:8px;font-size:9px;font-weight:900}.mapCard{height:255px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.05);padding:18px;color:#fff}.mapOrbit{position:relative;height:190px;border:1px solid rgba(255,255,255,.18);border-radius:50%;margin-top:10px}.mapNode{position:absolute;width:38px;height:38px;border-radius:50%;background:#0d1b35;border:2px solid #82d37b;display:grid;place-items:center;color:#87f36b;font-size:11px;font-weight:900}.mapNode.c{left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;background:#fff;color:#111}.mapNode.n1{left:45%;top:4%}.mapNode.n2{right:2%;top:41%}.mapNode.n3{left:14%;bottom:10%}.mapNode.n4{right:20%;bottom:8%}
.stepsBand{width:min(1560px,calc(100% - 80px));margin:16px auto;background:#fff;border:1px solid #e9edf3;border-radius:14px;display:grid;grid-template-columns:250px repeat(4,1fr);align-items:center;box-shadow:0 14px 34px rgba(15,23,42,.08);padding:14px 18px;gap:16px}.stepsTitle h3{margin:0;font-size:20px;line-height:1.05}.stepsTitle p{margin:6px 0 0;font-size:13px;color:#4d5a6f;line-height:1.3}.step{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center;position:relative}.step:not(:last-child):after{content:"";position:absolute;right:-12px;width:40px;border-top:2px dotted #6f86a4}.stepNum{position:absolute;left:-7px;top:-5px;width:30px;height:30px;border-radius:50%;background:#f3bf62;display:grid;place-items:center;font-weight:900;color:#071936}.stepIcon{width:58px;height:58px;border-radius:50%;background:#f1f6ff;border:1px solid #d6e0f4;display:grid;place-items:center}.stepIcon svg{width:30px;height:30px;fill:none;stroke:#071936;stroke-width:2}.step strong{font-size:15px}.step p{font-size:12px;margin:4px 0 0;color:#4c5870;line-height:1.35}
.content{width:min(1510px,calc(100% - 90px));margin:0 auto 28px;display:grid;grid-template-columns:360px 1fr 330px;gap:18px}.panel{background:#fff;border:1px solid #e9edf3;border-radius:14px;box-shadow:0 14px 32px rgba(15,23,42,.06);padding:18px}.panel h2{margin:0 0 16px;font-size:20px;text-transform:uppercase;letter-spacing:.02em}.guideItem{display:grid;grid-template-columns:38px 1fr 20px;gap:12px;padding:11px 0;border-bottom:1px solid #eef1f5;align-items:center}.miniIcon{width:34px;height:34px;border-radius:10px;background:#f3f7ff;display:grid;place-items:center}.miniIcon svg{width:20px;height:20px;fill:none;stroke:#071936;stroke-width:2}.guideItem strong{font-size:13px;display:block}.guideItem span span,.resourceItem span span{font-size:11px;color:#5d667a}.arrow{font-weight:900;color:#071936}.viewAll{height:42px;border:1px solid #dfe5ee;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#0d315f;margin-top:16px}.tutorialGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.videoCard,.bookCard{display:grid;gap:8px}.thumb{height:126px;border-radius:8px;position:relative;overflow:hidden;color:#fff;padding:16px;font-weight:900;display:flex;align-items:center}.thumb.blue{background:linear-gradient(135deg,#063e6f,#071936)}.thumb.purple{background:linear-gradient(135deg,#37145c,#071936)}.thumb.green{background:linear-gradient(135deg,#06471e,#071936)}.thumb.orange{background:linear-gradient(135deg,#7b3900,#071936)}.playBtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.65);display:grid;place-items:center}.time{position:absolute;right:8px;bottom:8px;background:#111;padding:3px 6px;border-radius:4px;font-size:11px}.videoCard strong,.bookCard strong{font-size:13px}.videoCard p,.bookCard p{font-size:11px;color:#4d5870;margin:0;line-height:1.35}.panelHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panelHead h2{margin:0}.panelHead a{font-size:13px;font-weight:900;color:#0d315f}.booksGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.bookCard{grid-template-columns:80px 1fr;background:#fff;border:1px solid #edf0f5;border-radius:10px;padding:10px;align-items:center}.bookCover{height:116px;border-radius:6px;color:#fff;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:900;white-space:pre-line;box-shadow:0 10px 20px rgba(0,0,0,.16)}.book-blue{background:linear-gradient(180deg,#083b68,#061936)}.book-green{background:linear-gradient(180deg,#15502a,#061936)}.book-purple{background:linear-gradient(180deg,#4c1983,#061936)}.book-gold{background:linear-gradient(180deg,#9a5b05,#061936)}.resourceItem{display:grid;grid-template-columns:34px 1fr;gap:10px;margin-bottom:12px}.helpBox{margin-top:22px;background:#fff5e4;border:1px solid #f1cc8a;border-radius:12px;padding:18px;text-align:center}.helpBox h3{margin:8px 0 6px}.helpBox p{font-size:13px;color:#4f5b6c}.helpBox a{height:38px;border:1px solid #d79b38;border-radius:8px;display:flex;justify-content:center;align-items:center;font-weight:900}
.proTip{width:min(1420px,calc(100% - 120px));margin:0 auto 34px;background:linear-gradient(180deg,#061936,#07152c);color:#fff;border-radius:16px;padding:18px 28px;display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:20px;align-items:center}.tipItem{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;border-left:1px solid rgba(255,255,255,.25);padding-left:18px}.tipItem:first-child{border-left:0;padding-left:0}.tipIcon{width:54px;height:54px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;color:var(--gold)}.tipIcon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}.tipItem strong{display:block;color:#fff}.tipItem span span{font-size:12px;color:rgba(255,255,255,.78)}
.innerHero{background:linear-gradient(135deg,#071936,#0b2753);color:#fff;border-radius:24px;padding:42px;margin:28px auto 20px;width:min(1500px,calc(100% - 90px));position:relative;overflow:hidden}.innerHero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(210,150,42,.25),transparent 38%)}.innerHero>*{position:relative}.innerHero h1{font-size:54px;line-height:1;margin:0 0 10px}.innerHero p{font-size:18px;line-height:1.5;color:rgba(255,255,255,.85);max-width:900px}.articleLayout{width:min(1500px,calc(100% - 90px));margin:0 auto 42px;display:grid;grid-template-columns:1fr 360px;gap:20px}.articleCard{background:#fff;border:1px solid #e9edf3;border-radius:18px;padding:28px;box-shadow:0 14px 32px rgba(15,23,42,.06)}.articleCard h2{font-size:28px;margin:0 0 12px}.articleCard p,.articleCard li{color:#4e5b70;line-height:1.65;font-size:16px}.articleCard ul{padding-left:20px}.lessonGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}.lesson{border:1px solid #edf0f5;border-radius:14px;padding:16px;background:#fbfdff}.sideMenu{background:#fff;border:1px solid #e9edf3;border-radius:18px;padding:18px;height:max-content;position:sticky;top:20px}.sideMenu a{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eef1f5;font-weight:800}
/* BOOK PDF PAGE CSS */
.bookPageWrap{width:min(1540px,calc(100% - 90px));margin:28px auto 44px}.bookBread{display:flex;align-items:center;gap:10px;color:#53627a;font-size:13px;font-weight:700;margin:6px 0 22px}.bookBread a{color:#53627a}.bookTop{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.bookTitleBlock h1{margin:0 0 8px;font-size:28px;letter-spacing:-.02em;color:#071936}.pdfBadge{display:inline-flex;align-items:center;margin-left:10px;padding:5px 10px;border-radius:999px;background:#b9ebe7;color:#07515b;font-size:11px;font-weight:900;vertical-align:middle}.bookTitleBlock p{margin:0;color:#53627a;font-size:15px}.bookActions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.bookActionBtn{min-height:44px;border:1px solid #d8dee8;border-radius:8px;background:#fff;color:#071936;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:900;box-shadow:0 8px 18px rgba(15,23,42,.04)}.bookLayout{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start}.bookSide{background:#fff;border:1px solid #e7edf4;border-radius:16px;box-shadow:0 16px 38px rgba(15,23,42,.08);padding:22px 14px}.bookSideTitle{display:flex;align-items:center;gap:12px;padding:0 14px 18px;font-size:18px;font-weight:950;text-transform:uppercase;color:#071936}.bookSideTitle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}.bookSideNav{display:grid;gap:8px}.bookSideLink{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:11px 10px;border-radius:10px;color:#071936}.bookSideLink.active{background:#eaf3ff;color:#0356c9}.bookSideIcon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f4f6f9;border:1px solid #e5eaf1}.bookSideIcon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}.bookSideLink strong{display:block;font-size:13px}.bookSideLink span{display:block;color:#526178;font-size:12px;margin-top:2px}.bookSupportBox{margin:22px 0 0;background:#fff6e8;border:1px solid #efc77f;border-radius:12px;padding:18px;text-align:center}.bookSupportBox h3{margin:8px 0 6px;font-size:15px}.bookSupportBox p{margin:0 0 14px;font-size:12px;color:#53627a}.bookSupportBox a{min-height:36px;border:1px solid #dda33e;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;background:#fff}.flipViewer{background:#111;border-radius:12px;overflow:hidden;box-shadow:0 18px 42px rgba(15,23,42,.22);border:1px solid #d6dee9}.flipToolbar{height:58px;background:linear-gradient(180deg,#071936,#031025);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.flipTools{display:flex;gap:24px;align-items:center;color:rgba(255,255,255,.9)}.flipTools span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;font-weight:900}.pageCounter{min-width:86px;height:32px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:900}.flipStage{background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 18%,transparent 82%,rgba(0,0,0,.22)),#242424;min-height:650px;padding:0 82px 44px;display:grid;align-items:center;position:relative}.flipNavArrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.28);font-size:36px;z-index:3}.flipNavArrow.left{left:18px}.flipNavArrow.right{right:18px}.bookSpread{width:min(1040px,100%);height:584px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;filter:drop-shadow(0 22px 34px rgba(0,0,0,.48))}.bookPage{position:relative;overflow:hidden;background:#fffdf7;padding:44px 48px}.bookPage.left{border-radius:8px 0 0 8px;background:linear-gradient(90deg,rgba(0,0,0,.10),transparent 6%),linear-gradient(180deg,#fffdf7,#fff)}.bookPage.right{border-radius:0 8px 8px 0;background:linear-gradient(270deg,rgba(0,0,0,.10),transparent 6%),linear-gradient(180deg,#fff,#fffdf7)}.bookPage.cover{background:radial-gradient(circle at 78% 55%,rgba(87,190,210,.18),transparent 24%),radial-gradient(circle at 82% 78%,rgba(121,79,215,.22),transparent 18%),linear-gradient(135deg,#071936,#0d315f);color:#fff}.bookPage.cover .coverLogo{color:#ffc35a;font-weight:950;text-transform:uppercase;margin-bottom:56px}.bookPage.cover h2{color:#fff;font-size:54px;line-height:1;margin:0 0 24px;letter-spacing:-.04em}.coverText{color:#fff;font-size:18px;line-height:1.45;max-width:330px}.coverFeature{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;margin-top:14px;color:rgba(255,255,255,.9);font-size:13px}.coverIcon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#ffc35a}.orbitGraphic{position:absolute;right:44px;bottom:100px;width:190px;height:190px;border-radius:50%;border:1px dashed rgba(118,210,240,.45)}.orbitGraphic:before{content:"▶";position:absolute;inset:62px;border-radius:50%;display:grid;place-items:center;background:#071936;border:2px solid #ffc35a;color:#ffc35a}.orbitDot{position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#0d315f;border:1px solid rgba(255,255,255,.28);color:#ffc35a;font-weight:900}.orbitDot.d1{left:-10px;top:50px}.orbitDot.d2{right:4px;top:12px}.orbitDot.d3{right:12px;bottom:12px}.orbitDot.d4{left:20px;bottom:0}.tocPage h2{font-size:34px;margin:0 0 14px;color:#071936}.tocUnderline{width:48px;height:3px;background:#ffc35a;margin-bottom:22px}.tocList{display:grid;gap:13px}.tocRow{display:grid;grid-template-columns:42px 1fr 34px;gap:14px;align-items:start;border-bottom:1px solid #e8edf3;padding-bottom:10px}.tocNum{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:950;font-size:13px}.tocRow:nth-child(1) .tocNum{background:#0d4f8b}.tocRow:nth-child(2) .tocNum{background:#2192a8}.tocRow:nth-child(3) .tocNum{background:#6ca92d}.tocRow:nth-child(4) .tocNum{background:#df7f20}.tocRow:nth-child(5) .tocNum{background:#7b4cc2}.tocRow:nth-child(6) .tocNum{background:#d04578}.tocRow:nth-child(7) .tocNum{background:#29a6a5}.tocRow:nth-child(8) .tocNum{background:#e0ad2a}.tocText strong{display:block;font-size:13px;color:#071936}.tocText span{display:block;color:#526178;font-size:11px;margin-top:3px}.tocPg{font-weight:900;color:#071936;font-size:12px}.pageCurl{position:absolute;right:0;top:0;width:164px;height:100%;background:linear-gradient(104deg,rgba(255,255,255,.0) 0 33%,rgba(255,255,255,.88) 34% 68%,rgba(196,203,213,.92) 69% 75%,rgba(255,255,255,.0) 76%),linear-gradient(90deg,transparent,rgba(0,0,0,.15));transform:skewX(-8deg) translateX(44px);box-shadow:-20px 0 28px rgba(0,0,0,.12);opacity:.95}.thirdPagePreview{position:absolute;right:34px;top:148px;width:180px;height:260px;background:#f4f8ff;border:1px solid #dbe4f0;border-radius:8px;padding:24px;color:#071936;font-size:12px}.thirdPagePreview:before{content:"";display:block;width:120px;height:70px;border-radius:8px;background:linear-gradient(135deg,#0d315f,#75b4ff);margin-bottom:20px}.flipBottomBar{width:min(520px,80%);height:48px;border-radius:999px;background:linear-gradient(180deg,#071936,#06152d);color:#fff;display:flex;align-items:center;justify-content:center;gap:24px;margin:-24px auto 20px;position:relative;z-index:4;box-shadow:0 14px 28px rgba(0,0,0,.34);font-weight:850;font-size:13px}.sameFolderNote{margin:18px 0 0;border:1px solid #e8edf3;background:#fbfdff;border-radius:12px;padding:14px 16px;color:#53627a;font-size:13px}.sameFolderNote code{color:#071936;font-weight:900}@media(max-width:1200px){.bookLayout{grid-template-columns:1fr}.flipStage{padding:0 56px 40px}.bookSpread{height:520px}}@media(max-width:760px){.bookPageWrap{width:calc(100% - 24px)}.bookTop{display:block}.bookActions{justify-content:flex-start;margin-top:16px}.bookSpread{grid-template-columns:1fr;height:auto}.bookPage{min-height:520px}.bookPage.right{display:none}.flipStage{padding:20px 18px 38px;min-height:auto}.flipNavArrow{display:none}.bookPage.left{border-radius:8px}.flipToolbar{padding:0 12px}.flipTools{gap:12px}}


/* =========================================================
   ACTUAL PDF EMBED FIX
   This makes each Guided Tutorials (Books) page load the real PDF
   from the same folder as the HTML page.
   ========================================================= */
.realPdfViewer{
  background:#111;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(15,23,42,.22);
  border:1px solid #d6dee9;
}
.realPdfToolbar{
  min-height:58px;
  background:linear-gradient(180deg,#071936,#031025);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 22px;
  font-weight:900;
}
.realPdfToolbar .pdfName{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.realPdfToolbar .pdfName span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}
.realPdfTools{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.realPdfTools a,
.realPdfTools button{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:8px;
  min-height:34px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  cursor:pointer;
}
.realPdfStage{
  min-height:720px;
  background:
    radial-gradient(circle at 50% 20%,rgba(210,147,34,.10),transparent 32%),
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 18%,transparent 82%,rgba(0,0,0,.20)),
    #242424;
  padding:22px;
}
.realPdfFrame{
  width:100%;
  height:720px;
  border:0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}
.pdfFallback{
  margin-top:12px;
  background:#fff8e8;
  border:1px solid #efc77f;
  color:#071936;
  border-radius:10px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.45;
}
.pdfFallback strong{
  display:block;
  margin-bottom:4px;
}
.bookActionBtn.primaryPdf{
  background:#071936;
  color:#fff;
  border-color:#071936;
}
@media(max-width:760px){
  .realPdfToolbar{
    align-items:flex-start;
    flex-direction:column;
    padding:14px;
  }
  .realPdfStage{
    min-height:560px;
    padding:12px;
  }
  .realPdfFrame{
    height:560px;
  }
}


/* =========================================================
   GUIDE PLATFORM CONTENT PROTECTION LAYER
   Applies across all generated guide pages.
   Keeps the page visually the same while discouraging downloads.
   Note: HTML/JS cannot fully block operating-system screenshots.
   ========================================================= */
html, body, img, video, iframe, object, embed, canvas, svg{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
img, video{
  -webkit-user-drag:none;
  user-drag:none;
}
@media print{
  body *{
    visibility:hidden !important;
  }
  body:before{
    content:"Printing and screenshot capture are not permitted on this guide platform.";
    visibility:visible !important;
    display:block;
    padding:40px;
    font:700 22px Arial, sans-serif;
    color:#071936;
  }
}


/* =========================================================
   STRONGER PDF + SCREEN CAPTURE DETERRENT LAYER
   Replaces native browser PDF iframe behaviour with a controlled canvas viewer.
   This prevents the browser PDF right-click "Save as PDF" menu from appearing.
   ========================================================= */
.securePdfViewer{
  background:#111;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(15,23,42,.22);
  border:1px solid #d6dee9;
}
.securePdfToolbar{
  min-height:58px;
  background:linear-gradient(180deg,#071936,#031025);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 22px;
  font-weight:900;
}
.securePdfName{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.securePdfName span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}
.securePdfControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.securePdfControls button{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:8px;
  min-height:34px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  cursor:pointer;
}
.securePdfControls button:hover{
  background:rgba(255,255,255,.14);
}
.securePdfStage{
  min-height:720px;
  background:
    radial-gradient(circle at 50% 20%,rgba(210,147,34,.10),transparent 32%),
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 18%,transparent 82%,rgba(0,0,0,.20)),
    #242424;
  padding:22px;
  display:grid;
  place-items:center;
  position:relative;
}
.securePdfCanvasWrap{
  width:min(980px,100%);
  min-height:680px;
  display:grid;
  place-items:start center;
  background:#171717;
  border-radius:10px;
  padding:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}
.securePdfCanvas{
  max-width:100%;
  height:auto;
  background:#fff;
  border-radius:3px;
  box-shadow:0 12px 28px rgba(0,0,0,.38);
  -webkit-user-select:none;
  user-select:none;
}
.securePdfStatus{
  margin-top:12px;
  color:#fff;
  font-weight:800;
  opacity:.85;
  text-align:center;
}
.securePdfNotice{
  margin-top:12px;
  background:#fff8e8;
  border:1px solid #efc77f;
  color:#071936;
  border-radius:10px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.45;
}
.captureShield{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:#061936;
  color:#fff;
  text-align:center;
  padding:40px;
}
.captureShield.show{
  display:flex;
}
.captureShieldInner{
  max-width:760px;
}
.captureShieldInner h2{
  margin:0 0 14px;
  font-size:34px;
  color:#ffc35a;
}
.captureShieldInner p{
  margin:0;
  font-size:18px;
  line-height:1.5;
}
body.capture-blocked .pageShell,
body.capture-blocked header,
body.capture-blocked footer{
  filter:blur(22px);
}
@media(max-width:760px){
  .securePdfToolbar{
    align-items:flex-start;
    flex-direction:column;
    padding:14px;
  }
  .securePdfStage{
    min-height:560px;
    padding:12px;
  }
  .securePdfCanvasWrap{
    min-height:520px;
    padding:10px;
  }
}


/* =========================================================
   HYBRID PDF LOADER FIX
   Canvas reader is used on localhost/server.
   Native PDF fallback is used on file:// so the PDF loads when double-clicked.
   ========================================================= */
.nativePdfFallbackFrame{
  width:100%;
  height:720px;
  border:0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.36);
  display:none;
}
.nativePdfLock{
  position:absolute;
  inset:22px;
  border-radius:8px;
  display:none;
  z-index:5;
  background:transparent;
}
.nativePdfLock.locked{
  display:block;
}
.fileModeNotice{
  margin-top:12px;
  background:#fff8e8;
  border:1px solid #efc77f;
  color:#071936;
  border-radius:10px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.45;
  display:none;
}
.fileModeNotice.show{
  display:block;
}
.nativeLockBtn.active{
  background:#ffc35a !important;
  color:#071936 !important;
}


/* Permanent PDF lock overlay: no unlock option is provided. */
.nativePdfLock.locked{
  display:block !important;
  cursor:not-allowed;
}


/* =========================================================
   CLEAN PDF VIEWER TEXT + SCROLL FIX
   Removes visible local-mode explanation text and allows
   the native PDF fallback to scroll through pages.
   ========================================================= */
.securePdfStatus,
.securePdfNotice,
.fileModeNotice{
  display:none !important;
}
.nativePdfLock,
.nativePdfLock.locked{
  display:none !important;
  pointer-events:none !important;
}
.nativePdfFallbackFrame{
  pointer-events:auto !important;
}
.securePdfCanvasWrap{
  overflow:auto;
  align-items:start;
}


/* =========================================================
   GUIDED TUTORIALS (VIDEOS) DETAIL PAGES
   Only used by the four cards under Guided Tutorials (Videos).
   ========================================================= */
.videoDetailWrap{width:min(1490px,calc(100% - 90px));margin:28px auto 44px}
.crumbs{display:flex;align-items:center;gap:10px;color:#5d6b82;font-size:13px;margin:0 0 18px;font-weight:700}
.crumbs a{color:#315780}
.videoHeader{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:22px;align-items:start;margin-bottom:22px}
.videoHeroIcon{width:86px;height:86px;border-radius:14px;background:linear-gradient(135deg,#08234b,#061936);display:grid;place-items:center;color:#fff;box-shadow:0 14px 26px rgba(6,25,54,.16)}
.videoHeroIcon svg{width:54px;height:54px;fill:none;stroke:#fff;stroke-width:2}
.videoHeader h1{margin:3px 0 8px;font-size:38px;line-height:1;color:#061936}
.videoHeader p{margin:0;color:#4c5870;font-size:16px;line-height:1.5;max-width:820px}
.backBtn{height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #d9e0ea;border-radius:8px;padding:0 18px;font-weight:900;color:#071936;background:#fff}
.videoPageGrid{display:grid;grid-template-columns:minmax(620px,1fr) 520px;gap:40px;align-items:start}
.mainVideoCard{background:#fff;border:1px solid #e5eaf2;border-radius:10px;overflow:hidden;box-shadow:0 18px 46px rgba(15,23,42,.08)}
.videoPlayerShell{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#061936,#0d315f);overflow:hidden}
.videoPlayerShell video{width:100%;height:100%;display:block;background:#061936;position:relative;z-index:2}
.videoFallbackPoster{position:absolute;inset:0;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;padding:50px;color:#fff;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.16),transparent 28%),linear-gradient(135deg,#061936,#0b2c5d);pointer-events:none}
.posterTitle{font-size:56px;line-height:.95;font-weight:900;letter-spacing:-.05em}
.posterTitle span{display:block;color:#f4b33e;font-size:26px;line-height:1.15;margin-top:18px}
.posterVisual{height:250px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);position:relative;overflow:hidden}
.posterVisual:before{content:"";position:absolute;inset:26px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border-radius:14px}
.posterPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.45);font-size:36px;color:#fff}
.videoUnderCards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border:1px solid #e5eaf2;border-radius:10px;margin-top:14px;box-shadow:0 14px 32px rgba(15,23,42,.06);overflow:hidden}
.videoInfoCard{padding:22px 26px;border-right:1px solid #e5eaf2}
.videoInfoCard:last-child{border-right:0}
.videoInfoCard h3{margin:0 0 10px;font-size:15px;color:#061936}
.videoInfoCard p{margin:0;font-size:13px;color:#4c5870;line-height:1.45}
.videoSidePanel{display:grid;gap:14px}
.detailBox{background:#fff;border:1px solid #e5eaf2;border-radius:10px;padding:26px;box-shadow:0 14px 32px rgba(15,23,42,.06)}
.detailBox h2{margin:0 0 18px;font-size:18px;text-transform:none}
.detailTable{display:grid;grid-template-columns:160px 1fr;gap:12px;font-size:14px;color:#4c5870;margin-bottom:18px}
.learnList{border-top:1px solid #e5eaf2;padding-top:14px;display:grid;gap:9px;font-size:14px;color:#263246}
.learnList span:before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dda030;color:#fff;font-size:12px;margin-right:8px}
.relatedGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.relatedMini .thumb{height:104px}
.resourceDownload{margin-top:16px;background:#fff;border:1px solid #e5eaf2;border-radius:10px;padding:18px 24px;display:grid;grid-template-columns:220px repeat(3,1fr);gap:18px;align-items:center;box-shadow:0 14px 32px rgba(15,23,42,.06)}
.downloadItem{display:flex;gap:12px;align-items:center;font-size:12px;color:#4c5870}
.downloadItem strong{display:block;color:#061936}
.helpBand{margin-top:18px;background:#fff7e8;border:1px solid #f0d4a2;border-radius:10px;min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:16px 22px;gap:16px}
.helpBand b{font-size:16px}.helpBand span{color:#4c5870}
.helpActions{display:flex;gap:12px}
.helpActions a{height:42px;border:1px solid #d59a37;border-radius:8px;padding:0 18px;display:flex;align-items:center;font-weight:900}
.helpActions a.primary{background:#d99c2f;color:#061936}
@media(max-width:1200px){.videoPageGrid{grid-template-columns:1fr}.relatedGrid{grid-template-columns:repeat(3,1fr)}.resourceDownload{grid-template-columns:1fr 1fr}.videoHeader{grid-template-columns:76px 1fr}.backBtn{grid-column:1/-1;width:max-content}}
@media(max-width:760px){.videoDetailWrap{width:calc(100% - 24px)}.videoHeader{grid-template-columns:1fr}.videoHeroIcon{width:70px;height:70px}.videoHeader h1{font-size:32px}.videoFallbackPoster{grid-template-columns:1fr;padding:28px}.posterTitle{font-size:38px}.posterVisual{display:none}.videoUnderCards,.relatedGrid,.resourceDownload{grid-template-columns:1fr}.videoInfoCard{border-right:0;border-bottom:1px solid #e5eaf2}}

@media(max-width:1400px){.heroShowcase{grid-template-columns:1fr 1fr}.mapCard,.phoneCard,.screenCard{height:auto;min-height:220px}.topLinks{gap:18px}}
@media(max-width:1200px){.hero{grid-template-columns:1fr;padding:38px}.heroShowcase{max-width:980px}.stepsBand{grid-template-columns:1fr;gap:12px}.step:after{display:none}.content{grid-template-columns:1fr}.tutorialGrid,.booksGrid{grid-template-columns:repeat(2,1fr)}.proTip{grid-template-columns:1fr 1fr}.topSearch,.avatar{display:none}}
@media(max-width:900px){body{padding-left:0!important;padding-top:72px!important}.igNav{transform:translateX(-110%);width:min(86vw,320px);height:100vh;background:rgba(255,255,255,.96);box-shadow:22px 0 70px rgba(15,23,42,.18);overflow-y:auto}.igNav:hover{width:min(86vw,320px)}.igNavTitle,.igLabel,.igNavSmall{opacity:1!important;transform:none!important}.igToggle{display:flex;position:fixed;left:12px;top:12px;width:46px;height:46px;border-radius:16px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(15,23,42,.12);align-items:center;justify-content:center;cursor:pointer;z-index:99999}.igToggle svg{width:20px;height:20px;fill:none;stroke:#111827;stroke-width:2.6}.igBackdrop{display:block;position:fixed;inset:0;background:rgba(2,6,23,.45);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:.18s;z-index:99997}body.navOpen .igNav{transform:translateX(0)}body.navOpen .igBackdrop{opacity:1;pointer-events:auto}.siteBottomFoot{left:0!important}.topNav{display:none}.hero{padding:30px 20px}.hero h1{font-size:42px}.heroShowcase{grid-template-columns:1fr}.articleLayout{grid-template-columns:1fr;width:calc(100% - 28px)}.innerHero{width:calc(100% - 28px)}.innerHero h1{font-size:38px}}
@media(max-width:640px){.tutorialGrid,.booksGrid,.lessonGrid,.proTip{grid-template-columns:1fr}.content,.stepsBand{width:calc(100% - 24px)}.heroShowcase{display:none}.hero h1{font-size:34px}.hero p{font-size:16px}.innerHero{padding:26px}.panel{padding:14px}.proTip{width:calc(100% - 24px);padding:18px}}

/* =========================================================
   GUIDED TUTORIALS (BOOKS) LAYOUT FIX
   Makes book cards follow the same visual structure as video cards:
   cover first, title underneath, description underneath.
   ========================================================= */
.booksGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}

.bookCard{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto;
  gap:8px;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  min-height:0;
  overflow:visible;
  align-items:start;
}

.bookCover{
  width:100%;
  height:126px;
  border-radius:8px;
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  font-size:12px;
  line-height:1.12;
  font-weight:900;
  white-space:pre-line;
  overflow:hidden;
  padding:12px;
  box-shadow:none;
}

.bookCard strong{
  display:block;
  font-size:13px;
  line-height:1.18;
  margin:0;
  color:#061936;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

.bookCard p{
  font-size:11px;
  line-height:1.35;
  color:#4d5870;
  margin:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

@media(max-width:1200px){
  .booksGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .booksGrid{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   PDF SLIDER VIDEO UPDATE CSS
   Additive only.
   ========================================================= */
.ecosystemUnlockPanel{margin:0 0 24px;padding:0 0 4px}
.ecosystemUnlockPanel .panelHead{margin-bottom:12px}
.ecosystemUnlockPanel h2{font-size:22px;line-height:1.08;color:#071936;text-transform:uppercase}
.ecoSlider{position:relative;border:1px solid #e5eaf2;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 32px rgba(15,23,42,.08)}
.ecoSliderTrack{display:flex;transition:transform .35s ease}
.ecoSlide{min-width:100%;display:block;position:relative;background:#fff}
.ecoPdfPreview{width:100%;aspect-ratio:1672/941;position:relative;overflow:hidden;background:linear-gradient(135deg,#fffdf8,#fff4df)}
.ecoPdfPreview iframe{width:100%;height:100%;border:0;display:block;pointer-events:none;background:#fff}
.ecoPdfFallback{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;padding:26px;background:linear-gradient(135deg,#fffdf8,#fff4df);z-index:0}
.ecoPdfPreview iframe{position:relative;z-index:1}
.ecoMiniTitle{font-size:34px;line-height:.95;font-weight:950;color:#071936;text-transform:uppercase}
.ecoMiniTitle span{display:block;color:#c88920;font-size:24px;margin-top:8px}
.ecoMiniStats{display:grid;gap:10px}
.ecoMiniStats span{background:#fff;border:1px solid #eadcc8;border-radius:10px;padding:12px;color:#071936;font-weight:900;box-shadow:0 10px 20px rgba(15,23,42,.08)}
.ecoSlideCaption{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:rgba(6,25,54,.92);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 14px;backdrop-filter:blur(10px);z-index:3}
.ecoSlideCaption strong{display:block;font-size:14px}
.ecoSlideCaption span{display:block;font-size:11px;color:rgba(255,255,255,.78);margin-top:2px}
.ecoOpenPill{flex:0 0 auto;height:34px;border-radius:999px;padding:0 14px;display:flex!important;align-items:center;background:#d99c2f;color:#071936!important;font-weight:950;font-size:12px;margin-top:0!important}
.ecoSliderBtn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:1px solid rgba(255,255,255,.42);background:rgba(6,25,54,.78);color:#fff;border-radius:50%;display:grid;place-items:center;cursor:pointer;z-index:5;font-size:24px;font-weight:900}
.ecoSliderBtn.prev{left:12px}.ecoSliderBtn.next{right:12px}
.ecoSliderDots{display:flex;justify-content:center;gap:8px;padding:10px 0 0}
.ecoSliderDots button{width:9px;height:9px;border-radius:999px;border:0;background:#d7dee9;cursor:pointer}
.ecoSliderDots button.active{width:24px;background:#d99c2f}
.ecoMissingNote{display:block;font-size:10px;margin-top:5px;color:#8a6a2f}
@media(max-width:760px){
  .ecosystemUnlockPanel h2{font-size:19px}
  .ecoSlideCaption{position:relative;left:auto;right:auto;bottom:auto;border-radius:0;align-items:flex-start;flex-direction:column}
  .ecoSliderBtn{width:34px;height:34px}
  .ecoPdfFallback{grid-template-columns:1fr;padding:20px}
  .ecoMiniTitle{font-size:26px}
}
