/* Infographic treatment shared by the topic overviews and every skill page. */
.main{--lesson:#5a3bb1;--lesson-soft:#f0eaff}
.sidebar-head{background:linear-gradient(135deg,#f8faff,#fff)}
.sidebar-head strong:before{content:'⌕';display:inline-grid;place-items:center;width:24px;height:24px;margin-right:7px;border-radius:7px;background:#e6eeff;color:#385db2;font-size:1rem;vertical-align:middle}
.group-title{display:flex;align-items:center;gap:7px;padding-top:14px;color:var(--group,#536b90)}
.group-mark{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:7px;background:color-mix(in srgb,var(--group,#5a3bb1) 13%,#fff);color:var(--group,#5a3bb1);font-size:.78rem;font-weight:900}
.topic-btn.current{background:color-mix(in srgb,var(--group,#5a3bb1) 11%,#fff);color:var(--group,#5a3bb1);box-shadow:inset 3px 0 var(--group,#5a3bb1)}
.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:137px;padding:22px 29px;background:radial-gradient(circle at 86% 11%,#6650cd 0,transparent 31%),linear-gradient(113deg,#102950,#215398 64%,#5d3bb4)}
.hero .eyebrow{padding:4px 10px;border-color:#ffffff5c;background:#ffffff24;color:#fff;font-size:.68rem}
.hero h1{margin:8px 0 3px;font-size:clamp(1.48rem,2.8vw,2.2rem)}
.hero p{font-size:.89rem}
.hero-route{display:flex;align-items:center;gap:7px;flex:none;margin:0;color:#fff}
.hero-route span{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:66px;font-size:.67rem;font-weight:800}
.hero-route i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ffffffea;color:#26478f;font-size:1.17rem;font-style:normal;box-shadow:0 6px 15px #081e4d36}
.hero-route span:nth-of-type(2) i{background:#d9f5ff;color:#136194}
.hero-route span:nth-of-type(3) i{background:#d6f7e2;color:#116d48}
.hero-route b{margin-top:-13px;color:#f7dc81;font-size:1.05rem}
.topic-head{align-items:center;min-height:83px;padding:15px 22px;background:linear-gradient(105deg,var(--lesson-soft),#fff 78%);border-top:5px solid var(--lesson)}
.topic-title-lockup{display:flex;align-items:center;gap:13px;min-width:0}
.topic-head-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px;background:var(--lesson);color:#fff;font-size:1.48rem;font-weight:900;line-height:1;box-shadow:0 7px 16px color-mix(in srgb,var(--lesson) 29%,transparent)}
.topic-head h2{margin:0;font-size:clamp(1.25rem,2.1vw,1.58rem)}
.nav-button{background:#fff;border-color:#d2def0;transition:transform .18s ease,box-shadow .18s ease}
.nav-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #183f761d}
.tabs{gap:7px;padding:7px 18px 0;background:#fff}
.tab{display:inline-flex;align-items:center;gap:7px;margin:0 0 7px;padding:8px 12px;border:1px solid transparent;border-radius:10px;font-size:.8rem;transition:transform .18s ease,background .18s ease}
.tab span{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#edf0f7;color:#60738e;font-size:.92rem}
.tab.active{border-color:color-mix(in srgb,var(--lesson) 30%,#fff);background:var(--lesson-soft);color:var(--lesson)}
.tab.active span{background:var(--lesson);color:#fff}
.tab:hover{transform:translateY(-2px);background:#f4f7fc}
.tab.active:hover{background:var(--lesson-soft)}
.panel{padding:22px;background:linear-gradient(180deg,#fff 0,#fbfcff 100%)}
.lesson-intro{display:flex;align-items:flex-start;gap:15px;padding:19px 20px;border:1px solid color-mix(in srgb,var(--lesson) 29%,#fff);border-radius:17px;background:linear-gradient(110deg,var(--lesson-soft),#fff 82%);box-shadow:0 10px 22px #173d7a0d}
.lesson-intro-icon{display:grid;place-items:center;flex:none;width:51px;height:51px;border-radius:15px;background:var(--lesson);color:#fff;font-size:1.55rem;font-weight:900;box-shadow:0 8px 16px color-mix(in srgb,var(--lesson) 25%,transparent)}
.lesson-intro strong{display:block;margin:0 0 4px;color:var(--lesson);font-size:.74rem;letter-spacing:.085em;font-weight:900}
.lesson-intro .lead{margin:0;color:#243b57;font-size:.98rem;line-height:1.65}
.lesson-visual{margin:16px 0 20px;padding:12px 14px 14px;border:1px solid #d8e5f1;border-radius:17px;background:#fff}
.visual-topline{display:flex;align-items:center;gap:8px;padding:2px 5px 10px;color:#28509a}
.visual-topline>span{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#deeeff;color:#2163aa;font-size:.74rem}
.visual-topline strong{font-size:.73rem;letter-spacing:.08em}
.visual-topline small{margin-left:auto;color:#667a93;font-size:.68rem;font-weight:700}
.lesson-visual #visualArt{border:1px solid #e4eaf4;border-radius:13px;overflow:auto;background:#fff}
.lesson-visual svg{margin:auto}
.lesson-visual figcaption{margin:10px 0 0}
.key-label{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:#193c73}
.key-label span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#ffe69b;color:#654513;font-size:1.05rem}
.point-list{gap:10px}
.point-list li{border-top-width:0;border-left:4px solid #6155ca;min-height:96px;background:linear-gradient(120deg,#f4f1ff,#fff);box-shadow:0 5px 13px #182d5f0e}
.point-list li:nth-child(2n){border-left-color:#08927d;border-top-width:0;background:linear-gradient(120deg,#eafaf5,#fff)}
.point-list li:nth-child(3n){border-left-color:#d16a32;background:linear-gradient(120deg,#fff3e9,#fff)}
.point-list li:nth-child(4n){border-left-color:#c04481;background:linear-gradient(120deg,#fff0f7,#fff)}
.point-list li:nth-child(3n) .point-hand{background:#ffe3d3;color:#a54c1e}
.point-list li:nth-child(4n) .point-hand{background:#ffdfed;color:#a33268}
.tip{margin-top:16px;background:linear-gradient(110deg,#e8faf2,#f8fffb 75%)}
.source-note{margin-top:15px;padding:11px 13px;border-radius:10px;background:#eef4ff;font-size:.84rem}
.source-note:before{content:'↗';display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#d8e7ff;color:#2758a8;font-weight:900}
.overview-feature{gap:17px}
.overview-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:14px}
.overview-chips:before{content:'YOU WILL EXPLORE';grid-column:1/-1;color:var(--topic);font-size:.66rem;font-weight:900;letter-spacing:.09em}
.overview-chip{display:flex;align-items:center;gap:6px;min-height:43px;padding:7px 8px;border-radius:10px;background:#fff;line-height:1.2;font-size:.68rem}
.overview-chip:before{content:'✓';display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--topic);color:#fff;font-size:.65rem}
.overview-aha{margin:13px 0 13px}
.overview-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 19px}
.overview-path>div{display:grid;grid-template-columns:29px minmax(0,1fr);column-gap:6px;align-items:center;padding:10px 11px;border:1px solid #d8e4f2;border-radius:12px;background:#f9fbff}
.overview-path>div:nth-child(1){background:#f2eeff;border-color:#dacfff}.overview-path>div:nth-child(2){background:#eaf7ff;border-color:#c7e7fb}.overview-path>div:nth-child(3){background:#eaf9f0;border-color:#c9ebd6}
.overview-path span{grid-row:1/3;color:#5d4eb3;font-size:1.35rem;font-weight:900}
.overview-path>div:nth-child(2) span{color:#1962a1}.overview-path>div:nth-child(3) span{color:#13815c}
.overview-path b{color:#183456;font-size:.76rem;line-height:1.2}.overview-path small{color:#536a83;font-size:.65rem;line-height:1.2}
.overview-section-head .section-label{font-size:.83rem}
.overview-link{min-height:72px}
.example-intro{padding:11px 13px;border-radius:10px;background:#eaf5ff;border-left:4px solid #3481c4;color:#244b74;font-weight:700}
.example-card{border-color:#dbe4f4;box-shadow:0 8px 21px #2443700c}
.example-card:nth-child(2n){border-color:#c9e6da}
.example-card header{padding:11px 15px;background:linear-gradient(100deg,#e6eaff,#f9faff);color:#283e83}
.example-card:nth-child(2n) header{background:linear-gradient(100deg,#e3f7ed,#fafffc);color:#14634f}
.example-number{background:#5049bd;color:#fff}
.example-card:nth-child(2n) .example-number{background:#0c8567}
.example-body{padding:16px 18px}
.example-question{line-height:1.55}
.example-solution{padding:13px 14px 11px;border:0;border-radius:10px;background:#f1f7ff}
.example-card:nth-child(2n) .example-solution{background:#ecfaf3}
.example-solution b{display:inline-flex;align-items:center;gap:6px;color:#166a61;font-size:.77rem;text-transform:uppercase;letter-spacing:.04em}
.example-solution b:before{content:'✓';display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#c7efdf;color:#126c50}
.quiz-entry{display:flex;align-items:center;gap:14px;margin:0 0 15px;padding:16px;border:1px solid #b7e4cc;border-radius:15px;background:linear-gradient(105deg,#e5f9ee,#f8fff9)}
.quiz-entry>span{display:grid;place-items:center;flex:none;width:45px;height:45px;border-radius:13px;background:#09845f;color:#fff;font-size:1.55rem;font-weight:900}
.quiz-entry strong{color:#116c53;font-size:1.12rem}.quiz-entry p{margin:2px 0 0;color:#335c55;font-size:.87rem;line-height:1.5}
.quiz-wrap{border-radius:14px;border-color:#bedecf;box-shadow:0 6px 17px #183f6510}
.resource{background:#eef4ff;border-color:#c7d9f1;color:#274f8e}
.resource:hover{background:#dceafa}
.bottom-nav button{transition:transform .18s ease,background .18s ease}.bottom-nav button:hover:not(:disabled){transform:translateY(-2px);background:#edf4ff}
@media(max-width:820px){.hero-route span{min-width:54px}.hero-route i{width:33px;height:33px}.hero-route{gap:3px}.overview-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.hero{display:block;min-height:0;padding:18px}.hero-route{justify-content:flex-start;margin-top:14px}.hero-route span{flex-direction:row;min-width:0;font-size:.65rem}.hero-route i{width:25px;height:25px;border-radius:8px;font-size:.8rem}.hero-route b{margin:0 1px}.topic-head{min-height:74px;padding:12px 13px}.topic-title-lockup{gap:9px}.topic-head-icon{width:39px;height:39px;border-radius:11px;font-size:1.17rem}.topic-head h2{font-size:1.22rem}.tabs{gap:2px;padding:6px 5px 0}.tab{gap:3px;padding:6px 5px;margin-bottom:5px;font-size:.72rem}.tab span{width:20px;height:20px;font-size:.75rem}.panel{padding:14px}.lesson-intro{gap:10px;padding:13px}.lesson-intro-icon{width:38px;height:38px;border-radius:11px;font-size:1.13rem}.lesson-intro .lead{font-size:.91rem}.lesson-visual{padding:10px}.visual-topline small{display:none}.overview-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-art{order:-1}.overview-path{grid-template-columns:1fr;gap:6px}.overview-path>div{grid-template-columns:25px minmax(0,1fr);padding:7px 10px}.overview-path span{font-size:1.1rem}.example-body{padding:13px}.quiz-entry{padding:12px}.quiz-entry>span{width:37px;height:37px;font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){.tab,.nav-button,.bottom-nav button{transition:none}.tab:hover,.nav-button:hover:not(:disabled),.bottom-nav button:hover:not(:disabled){transform:none}}