.intro-container{width:100%;height:var(--fixed-scroll-total);background:#fff;position:relative}.intro-sticky-viewport{justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:sticky;top:0;left:0;overflow:hidden}.layer{flex-direction:column;align-items:center;width:100%;max-width:1400px;transition:opacity .3s;display:flex;position:absolute}.layer-roadmap{align-items:flex-start;max-width:1000px;padding-left:8%}.layer-chart-card{align-items:center}.highlight-audience{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:16px;font-size:52px;font-weight:900}.pre-intro-text{color:#334155;text-align:center;font-size:26px}.charts-wrapper{box-sizing:border-box;background:#f8fafc;border-radius:30px;align-items:center;gap:clamp(10px,1.8vw,24px);width:min(100%,1200px);max-width:100%;padding:clamp(14px,2.6vw,36px) clamp(12px,2.4vw,32px);display:flex;box-shadow:0 10px 40px #0000000a}.charts-wrapper-single{justify-content:center;width:min(100%,920px)}.chart-right{opacity:0;pointer-events:none;flex-shrink:0;width:0;min-width:0;transition:opacity .7s .2s,transform .7s .2s;overflow:hidden;transform:translateY(16px)}.chart-right.visible{opacity:1;pointer-events:auto;width:clamp(220px,36%,510px);transform:translateY(0)}.chart-tooltip{color:#fff;pointer-events:none;z-index:9999;opacity:0;background:#0f172af2;border:1px solid #ffffff1a;border-radius:8px;padding:10px 15px;font-size:13px;line-height:1.5;transition:opacity .15s;position:fixed}.roadmap-container{width:100%}.roadmap-title{color:#334155;margin-bottom:36px;font-size:22px;font-weight:500;line-height:1.5}.roadmap-title-highlight{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:26px;font-weight:900}.roadmap-track{flex-direction:column;gap:20px;padding-left:8px;display:flex;position:relative}.roadmap-line{background:linear-gradient(#2563eb 0%,#7c3aed 50%,#ef4444 100%);border-radius:2px;width:3px;position:absolute;top:20px;bottom:20px;left:27px}.roadmap-node{align-items:flex-start;gap:24px;transition:opacity .5s,transform .5s;display:flex}.roadmap-badge{z-index:1;background:#fff;border:2px solid #e2e8f0;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;display:flex;position:relative;box-shadow:0 4px 20px #2563eb26,0 1px 3px #0000000f}.roadmap-icon{font-size:22px}.roadmap-icon-svg{color:#2563eb}.roadmap-num{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;position:absolute;top:-6px;right:-6px}.roadmap-card{background:#f8fafc;border:1px solid #f1f5f9;border-radius:16px;flex-direction:column;flex:1;justify-content:center;min-height:56px;padding:18px 24px;display:flex;box-shadow:0 2px 12px #0000000a}.roadmap-question{color:#0f172a;margin-bottom:4px;font-size:18px;font-weight:700}.roadmap-desc{color:#64748b;font-size:13px;line-height:1.5}.roadmap-scroll-hint{color:#94a3b8;align-items:center;gap:10px;margin-top:36px;padding-left:92px;font-size:15px;font-weight:500;animation:2s ease-in-out infinite roadmap-hint-pulse;display:flex}.scroll-arrow{font-size:20px;animation:1.5s ease-in-out infinite roadmap-arrow-bounce}@keyframes roadmap-hint-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes roadmap-arrow-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}.task1-scroll-container{width:100%;height:var(--fixed-scroll-total);background:#fff;position:relative}.task1-fixed-viewport{background:#fff;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:sticky;top:0;overflow:hidden}.task1-stage-layout{box-sizing:border-box;align-items:center;gap:22px;width:min(1400px,100% - 32px);height:calc(100% - 32px);display:flex}.task1-map-shell{flex:auto;justify-content:center;align-items:center;min-width:0;display:flex;position:relative}.task1-map-svg{width:100%;max-width:1040px;height:auto}.continent-path{stroke:#fff;stroke-width:.5px;cursor:pointer;transition:fill .7s}.continent-path:hover{stroke:#1e293b;stroke-width:1.5px;filter:brightness(1.08)}.dataset-badge{z-index:10;background:#eff6fff5;border:1px solid #bfdbfe;border-radius:10px;max-width:420px;padding:12px 20px;position:absolute;top:22px;left:24px;box-shadow:0 4px 16px #2563eb12}.badge-main{color:#1d4ed8;font-size:15px;font-weight:800;line-height:1.3}.badge-sub{color:#64748b;margin-top:5px;font-size:12px;font-weight:500}.metric-toggle{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #e2e8f0;border-radius:12px;flex-wrap:wrap;gap:6px;max-width:400px;padding:6px;transition:opacity .3s;display:flex;position:absolute;top:22px;right:24px;box-shadow:0 4px 16px #0f172a12}.metric-toggle button{color:#64748b;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;padding:7px 12px;font-family:inherit;font-size:12px;font-weight:700;transition:all .25s}.metric-toggle .icon{vertical-align:middle;margin-right:8px;display:inline-block}.metric-toggle button:hover{color:#0f172a;background:#f1f5f9}.metric-toggle button.active{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);box-shadow:0 3px 10px #2563eb40}.task1-sidebar{box-sizing:border-box;flex-direction:column;align-self:stretch;gap:14px;width:320px;min-width:280px;margin-top:64px;padding-top:82px;display:flex}.leaderboard-card{background:#f8fafcf5;border:1px solid #dbe4ef;border-radius:16px;flex-direction:column;gap:12px;padding:14px;display:flex;box-shadow:0 10px 28px #0f172a14}.leaderboard-header{flex-direction:column;gap:4px;display:flex}.leaderboard-kicker{text-transform:uppercase;letter-spacing:.12em;color:#64748b;font-size:10px;font-weight:800}.leaderboard-header h4{color:#0f172a;margin:0;font-size:15px;font-weight:800;line-height:1.25}.leaderboard-subtitle{color:#64748b;font-size:12px;line-height:1.45}.leaderboard-chart{flex-direction:column;gap:10px;display:flex}.leaderboard-row{flex-direction:column;gap:6px;display:flex}.leaderboard-row-top{grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.leaderboard-rank{color:#0f172a;background:#e2e8f0;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:800;display:flex}.leaderboard-country{color:#1e293b;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;font-weight:700;overflow:hidden}.leaderboard-value{color:#0f172a;white-space:nowrap;font-size:11px;font-weight:800}.leaderboard-bar-track{background:#e2e8f0;border-radius:999px;width:100%;height:8px;overflow:hidden}.leaderboard-bar-fill{border-radius:inherit;height:100%}.leaderboard-empty{color:#64748b;padding:12px 2px 4px;font-size:12px}.info-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;color:#475569;background:#fffffff2;border:1px solid #e2e8f0;border-radius:10px;max-width:420px;padding:14px 20px;font-size:13px;line-height:1.7;position:absolute;top:95px;left:24px;box-shadow:0 4px 16px #0f172a12}.info-panel p{margin:0}.info-panel .hl{color:#2563eb;font-weight:700}.task1-tooltip{color:#fff;pointer-events:none;z-index:99999;opacity:0;background:#0f172af5;border-radius:10px;min-width:220px;max-width:320px;padding:12px 16px;font-size:12.5px;line-height:1.5;transition:opacity .18s;position:fixed;box-shadow:0 8px 24px #00000040}.task1-tooltip .tp-title{color:#93c5fd;margin-bottom:3px;font-size:15px;font-weight:800}.task1-tooltip .tp-subtitle{color:#cbd5e1;margin-bottom:6px;font-size:12px}.task1-tooltip .tp-subtitle b{color:#fff}.task1-tooltip .tp-divider{border-top:1px solid #ffffff1f;margin:7px 0}.task1-tooltip .tp-country-header{text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px;font-size:11px;font-weight:600}.task1-tooltip .tp-row{justify-content:space-between;gap:14px;margin-bottom:3px;display:flex}.task1-tooltip .tp-label{color:#e2e8f0}.task1-tooltip .tp-val{color:#fff;flex-shrink:0;font-weight:700}.task1-tooltip .tp-note{color:#94a3b8;font-style:italic}.stage-dots{z-index:10;align-items:center;gap:28px;display:flex;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.stage-dot-wrap{opacity:.35;flex-direction:column;align-items:center;gap:5px;transition:opacity .4s;display:flex}.stage-dot-wrap.active{opacity:1}.stage-dot{background:#94a3b8;border-radius:50%;width:10px;height:10px;transition:all .4s}.stage-dot-wrap.active .stage-dot{background:#2563eb;transform:scale(1.3);box-shadow:0 0 8px #2563eb80}.stage-dot-label{color:#64748b;white-space:nowrap;font-size:10px;font-weight:600}.stage-dot-wrap.active .stage-dot-label{color:#2563eb}.legend-container{z-index:10;background:#fffffff7;border:1px solid #e2e8f0;border-radius:12px;width:100%;min-width:0;padding:14px 16px;position:static;box-shadow:0 4px 16px #0f172a12}.legend-title{color:#0f172a;margin-bottom:10px;font-size:13px;font-weight:800}.legend-bins-wrap{flex-direction:column;gap:6px;display:flex}.legend-bin{color:#475569;align-items:center;gap:8px;font-size:11.5px;font-weight:600;display:flex}.legend-swatch{border:1px solid #0f172a14;border-radius:3px;flex-shrink:0;width:14px;height:14px}@media (width<=1180px){.task1-stage-layout{gap:18px;width:min(1180px,100% - 24px)}.task1-sidebar{width:300px;min-width:260px}}@media (width<=960px){.task1-fixed-viewport{align-items:flex-start}.task1-stage-layout{flex-direction:column;width:calc(100% - 24px);height:calc(100% - 24px);padding-top:72px}.task1-sidebar{width:min(560px,100%);min-width:0;padding-top:0}.task1-map-svg{max-width:100%}}@media (width<=640px){.task1-stage-layout{gap:14px;width:calc(100% - 16px);height:calc(100% - 16px);padding-top:64px}.task1-sidebar{width:100%}.leaderboard-card,.legend-container{border-radius:14px;padding:12px}.leaderboard-header h4{font-size:14px}}.ts-band{width:100%;min-height:var(--fixed-scroll-hold);box-sizing:border-box;z-index:1;background:0 0;border-bottom:1px solid #f0f0f0;justify-content:flex-start;align-items:center;padding:100px 60px;display:flex;position:relative}.ts-content{z-index:2;max-width:520px;position:relative}.ts-content h2{color:#0f172a;letter-spacing:-.02em;margin-bottom:16px;font-size:34px;font-weight:800}.ts-content p{color:#64748b;font-size:17px;line-height:1.7}.ts-image{opacity:0;z-index:-1;pointer-events:none;will-change:transform, opacity, background-position-x;background-position:100%;background-repeat:no-repeat;background-size:auto 70%;width:100%;height:900px;position:fixed;top:calc(100vh - 860px);right:0;-webkit-mask-image:linear-gradient(270deg,#000000bf 0%,#00000073 45%,#0000 100%);mask-image:linear-gradient(270deg,#000000bf 0%,#00000073 45%,#0000 100%)}@font-face{font-family:Google Sans;src:url(/Career-a-vis-AI/GoogleSans-Regular.ttf)format("truetype")}body,html{margin:0;padding:0;overflow:hidden}html,body,body *,svg,svg text{font-family:Google Sans,Segoe UI,Helvetica Neue,sans-serif}:root{--fixed-scroll-hold:120vh;--fixed-scroll-total:calc(100vh + var(--fixed-scroll-hold))}.web-container{width:100vw;height:100vh;display:flex}.left-container{color:#181818;box-sizing:border-box;background:#fff;border-right:1px solid #c7c7c7;flex-shrink:0;align-items:center;width:380px;height:100vh;padding:40px;display:flex}.detail-card{background:#fff;border-radius:16px;padding:30px;transition:all .5s;animation:.4s ease-out slideIn}@keyframes slideIn{0%{transform:translate(-20px)}to{transform:translate(0)}}.badge{text-transform:uppercase;letter-spacing:1px;color:#fff;background:#3b82f6;border-radius:20px;padding:4px 10px;font-size:10px;font-weight:700}.description{opacity:1;will-change:opacity, transform;margin-top:15px;transition:opacity .26s,transform .26s;transform:translateY(0)}.description.fade-in{opacity:1;transform:translateY(0)}.description.fade-out{opacity:0;transform:translateY(6px)}.right-container{scroll-behavior:smooth;background:0 0;flex-grow:1;height:100vh;overflow-y:auto}.task-section{box-sizing:border-box;z-index:1;background:#fff;border-bottom:1px solid #f0f0f0;width:100%;min-height:100vh;padding-bottom:200px;position:relative}.transition-band{box-sizing:border-box;z-index:1;background:0 0;border-bottom:1px solid #f0f0f0;justify-content:flex-start;align-items:center;width:100%;min-height:480px;padding:100px 60px;display:flex;position:relative}.transition-content{z-index:2;max-width:520px;position:relative}.transition-content h2{color:#0f172a;letter-spacing:-.02em;margin-bottom:16px;font-size:34px;font-weight:800}.transition-content p{color:#64748b;font-size:17px;line-height:1.7}.inline-icon{vertical-align:middle;margin-right:8px;display:inline-block}.earth-sticky-layer{z-index:0;pointer-events:none;width:100%;height:0;position:sticky;top:0}.earth-viewport{opacity:0;will-change:transform, opacity, background-position-x;pointer-events:none;background-image:url(/Career-a-vis-AI/images/Earth.jpg);background-position-y:50%;background-repeat:no-repeat;background-size:auto 100%;width:60%;height:450px;position:absolute;top:calc(100vh - 430px);left:0;-webkit-mask-image:linear-gradient(270deg,#000000bf 0%,#00000073 45%,#0000 100%);mask-image:linear-gradient(270deg,#000000bf 0%,#00000073 45%,#0000 100%)}.bottom-spacer{height:40vh}.right-container::-webkit-scrollbar{width:8px}.right-container::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.visualization-badges{flex-direction:column;align-items:flex-start;gap:8px;width:100%;margin-top:12px;display:flex}.visualization-badges .vis-badge{object-fit:contain;width:auto;max-width:160px;height:28px;box-shadow:none;opacity:1;transform-origin:0;background:0 0;border:none;border-radius:4px;padding:0;transition:opacity .16s,transform .16s;display:block}