:root[data-page=journey] { scroll-padding-top:0; }
.career-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 34px; background:linear-gradient(110deg,#e9f1ff,#eff3ff); border:1px solid #dce7fa; border-radius:10px; }
.career-kicker { font-size:11px; color:#5e7ba9; }
.career-intro h2 { font-size:29px; font-weight:650; line-height:1.45; margin:12px 0; color:#233f6c; }
.career-intro p { font-size:12px; line-height:1.9; color:#657b9f; margin:0; }
.career-graphic { width:280px; color:#7e9cd3; flex-shrink:0; }
.career-graphic svg { width:100%; overflow:visible; }
.career-line-guide { stroke:#c5d5ef; stroke-dasharray:3 6; }
.career-line { stroke:#719be3; fill:none; stroke-width:2.5; }
.career-graphic circle { fill:#e9f1ff; stroke:#6f98e0; stroke-width:2; }
.career-graphic circle:last-child { fill:#5687dc; }
.career-graphic>span { display:block; text-align:right; font-size:8px; letter-spacing:2px; margin-top:10px; }
.career-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0 32px; }
.career-overview>div { display:flex; align-items:center; gap:13px; padding:17px; background:var(--desk-surface); border:1px solid var(--desk-line); border-radius:8px; }
.career-overview small,.career-overview strong,.career-overview div>span:not(.app-icon) { display:block; }
.career-overview small { color:var(--desk-subtle); font-size:10px; margin-bottom:3px; }
.career-overview strong { font-size:13px; font-weight:600; }
.career-overview div>span:not(.app-icon) { color:var(--desk-muted); font-size:10px; margin-top:4px; }
.career-layout { display:grid; grid-template-columns:minmax(0,1fr) 245px; align-items:start; gap:28px; }
.career-events { min-width:0; }
.career-principle,.journey-principle{position:relative;overflow:hidden;margin:28px 0 25px;padding:27px 30px 25px;border:1px solid var(--desk-line);border-radius:16px;background:linear-gradient(110deg,var(--desk-tint),transparent 68%);color:var(--desk-ink);isolation:isolate}
.career-principle:before,.journey-principle:before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.5) 48%,transparent 68%);transform:translateX(-120%);pointer-events:none}
.career-principle.is-visible:before,.journey-principle.is-visible:before{animation:principle-sweep 1.1s ease .18s both}
.career-principle p,.journey-principle p{position:relative;margin:0;font:19px/1.65 Georgia,'Songti SC',serif;letter-spacing:.02em}.career-principle strong,.journey-principle strong{color:var(--desk-blue);font-weight:500}.principle-mark{display:block;margin-bottom:10px;color:var(--desk-blue);font-size:21px;transform:translateY(8px);opacity:0}.is-visible .principle-mark{animation:principle-rise .55s ease both}.principle-line{display:block;width:0;height:2px;margin-top:18px;background:var(--desk-blue)}.is-visible .principle-line{animation:principle-line 1s cubic-bezier(.2,.8,.2,1) .25s both}
.journey-principle{--desk-blue:var(--green);--desk-tint:#e9eee2;margin:42px 0 30px;padding:30px 34px;border-radius:2px;background:linear-gradient(110deg,#eef1e6,transparent 70%);border-color:var(--line)}.journey-principle p{font-size:22px}.journey-principle strong{color:var(--green)}
@keyframes principle-sweep{to{transform:translateX(120%)}}@keyframes principle-rise{to{opacity:1;transform:none}}@keyframes principle-line{to{width:100%}}
@media(prefers-reduced-motion:reduce){.career-principle:before,.journey-principle:before,.principle-mark,.principle-line{animation:none!important}.principle-mark{opacity:1;transform:none}.principle-line{width:100%}}
.career-events>.desk-section-heading { margin:0 0 20px; }
.career-events>.desk-section-heading h2 { font-size:16px; font-weight:600; margin:0; }
.career-events>.desk-section-heading h2>span { font-size:10px; font-weight:400; color:var(--desk-subtle); margin-left:8px; }
.career-event { position:relative; padding:0 0 22px 36px; scroll-margin-top:90px; }
.career-event:before { content:''; position:absolute; top:16px; bottom:-16px; width:1px; background:var(--desk-line); left:12px; }
.career-event:last-of-type:before { bottom:30px; }
.career-marker { position:absolute; left:0; top:23px; width:25px; height:25px; border-radius:50%; display:grid; place-items:center; background:var(--desk-bg); border:1px solid var(--desk-line); color:var(--desk-subtle); font-size:9px; z-index:1; transition:background .2s,color .2s; }
.career-event.is-reading .career-marker { background:var(--desk-blue); border-color:var(--desk-blue); color:var(--desk-surface); }
.career-card { background:var(--desk-surface); border:1px solid var(--desk-line); border-radius:9px; overflow:hidden; transition:border-color .25s; }
.career-event.is-reading .career-card { border-color:#9ab9f5; }
.career-card>header { padding:24px 26px 16px; border-bottom:1px solid var(--desk-line); }
.career-event-meta { display:flex; gap:15px; justify-content:space-between; align-items:center; margin-bottom:11px; }
.career-event-meta .eyebrow { font-size:8px; color:var(--desk-subtle); letter-spacing:.8px; margin:0; }
.career-event-meta time { color:var(--desk-blue); background:var(--desk-tint); border-radius:4px; padding:3px 7px; font-size:10px; white-space:nowrap; }
.career-card h2 { font-size:20px; font-weight:600; line-height:1.5; margin:0; }
.career-body { padding:20px 26px 24px; }
.career-body>p { color:var(--desk-muted); font-size:13px; line-height:1.95; margin:0 0 13px; }
.career-tags { display:flex; gap:6px; flex-wrap:wrap; margin:18px 0; }
.career-tags>span { font-size:10px; color:var(--desk-muted); background:var(--desk-soft); border-radius:4px; padding:3px 8px; }
.career-highlight { display:flex; align-items:center; gap:14px; padding:15px; border-radius:6px; background:var(--desk-bg); }
.career-highlight>span { font-size:12px; color:var(--desk-blue); padding:9px; background:var(--desk-tint); border-radius:7px; }
.career-highlight strong { display:block; font-size:12px; font-weight:500; margin-bottom:4px; }
.career-highlight p { font-size:10px; color:var(--desk-subtle); margin:0; }
.career-body>.text-link { font-size:12px; color:var(--desk-blue); margin-top:14px; }
.career-outline { position:sticky; top:90px; }
.career-index { padding:20px 16px 12px; max-height:calc(100dvh - 120px); overflow-y:auto; }
.career-index-title { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 3px; }
.career-index-title h2 { font-size:12px; }
.career-index-title>span { font-size:9px; color:var(--desk-subtle); }
.career-progress { height:3px; background:var(--desk-soft); margin:16px 4px 12px; border-radius:3px; overflow:hidden; }
.career-progress>span { display:block; height:100%; width:100%; background:var(--desk-blue); transform:scaleX(0); transform-origin:left; transition:transform .15s; }
.career-chapter-nav { display:flex; flex-direction:column; gap:4px; }
.career-chapter-nav a { display:flex; align-items:center; gap:10px; padding:10px 9px; border-radius:6px; }
.career-chapter-nav a:hover { background:var(--desk-soft); }
.career-chapter-nav a[aria-current=true] { background:var(--desk-tint); color:var(--desk-blue); }
.career-nav-dot { width:5px; height:5px; border-radius:50%; background:var(--desk-subtle); }
.career-chapter-nav a[aria-current=true] .career-nav-dot { background:var(--desk-blue); }
.career-chapter-nav time { display:block; font-size:9px; color:var(--desk-subtle); }
.career-chapter-nav strong { display:block; font-size:11px; font-weight:500; margin-top:2px; }
.career-chapter-nav small { margin-left:auto; font-size:9px; color:var(--desk-subtle); }
.career-index-note { font-size:10px; color:var(--desk-subtle); line-height:1.9; border-top:1px solid var(--desk-line); padding-top:13px; margin:12px 7px 0; }
.career-home-link { display:flex; align-items:center; gap:8px; padding:18px 14px; font-size:11px; color:var(--desk-muted); }
.career-home-link svg { width:16px; height:16px; }
.career-home-link>svg:last-child { margin-left:auto; }
.career-source { display:flex; align-items:flex-start; gap:10px; padding:4px 0 20px 36px; color:var(--desk-subtle); }
.career-source svg { width:16px; height:16px; margin-top:4px; }
.career-source p { font-size:11px; line-height:1.9; margin:0; }
.career-next { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 28px 36px; padding:22px; background:var(--desk-surface); border:1px solid var(--desk-line); border-radius:8px; }
.career-next small { color:var(--desk-subtle); font-size:10px; display:block; margin-bottom:6px; }
.career-next strong { font-size:13px; font-weight:500; }
.career-next>svg { color:var(--desk-blue); }
.journey-workspace .desk-mobile-nav a[aria-current=page] { color:var(--desk-blue); }
:root[data-page=journey] #classic-layout .site-header { position:sticky; top:0; }
:root[data-page=journey] #classic-layout .journey-rail { top:120px; }
:root[data-page=journey] #classic-layout .journey-chapter { scroll-margin-top:125px; }
:root[data-theme=dark] .career-intro { background:linear-gradient(110deg,#233551,#293850); border-color:#334762; }
:root[data-theme=dark] .career-intro h2 { color:#d0dfff; }
:root[data-theme=dark] .career-intro p,:root[data-theme=dark] .career-kicker { color:#a3b7d7; }
:root[data-theme=dark] .career-line-guide { stroke:#3c4c65; }
:root[data-theme=dark] .career-graphic circle { fill:#293850; }
@media(min-width:1600px) { .career-layout { grid-template-columns:minmax(0,1fr) 285px; gap:36px; } .career-card>header { padding:28px 32px 20px; } .career-body { padding:24px 32px 28px; } }
@media(max-width:1100px) { .career-layout { grid-template-columns:minmax(0,1fr) 205px; gap:18px; } .career-event-meta { flex-direction:column; align-items:flex-start; gap:8px; } .career-card>header { padding:20px; } .career-body { padding:18px 20px 20px; } .career-overview>div { align-items:flex-start; padding:14px; gap:9px; } .career-overview .app-icon { width:28px; height:28px; } .career-overview strong { font-size:11px; } .career-graphic { width:210px; } }
@media(max-width:760px) { .career-intro { padding:24px; position:relative; overflow:hidden; } .career-intro>div:first-child { position:relative; z-index:1; } .career-intro h2 { font-size:25px; } .career-intro p { font-size:11px; } .career-graphic { width:160px; position:absolute; right:-35px; bottom:5px; opacity:.25; } .career-overview { gap:8px; margin:14px 0 26px; } .career-overview>div { display:block; padding:12px 9px; } .career-overview .app-icon { margin-bottom:8px; } .career-overview div>span:not(.app-icon) { display:none; } .career-overview strong { font-size:10px; } .career-overview small { font-size:9px; } .career-layout { display:flex; flex-direction:column; gap:18px; } .career-outline { order:-1; width:100%; top:62px; z-index:20; background:var(--desk-bg); padding-block:7px; } .career-index { padding:12px 10px 5px; } .career-progress { margin-block:10px 5px; } .career-chapter-nav { flex-direction:row; overflow-x:auto; scrollbar-width:thin; gap:3px; } .career-chapter-nav a { flex-shrink:0; padding:8px; } .career-nav-dot,.career-chapter-nav small,.career-index-note,.career-home-link { display:none; } .career-chapter-nav strong { font-size:10px; } .career-events { width:100%; } .career-event { padding-left:22px; scroll-margin-top:215px; } .career-event:before { left:7px; } .career-marker { width:18px; height:18px; font-size:7px; top:24px; } .career-card h2 { font-size:17px; } .career-card>header { padding:19px 17px 14px; } .career-body { padding:16px 17px 20px; } .career-body>p { font-size:12px; } .career-highlight { padding:11px; gap:9px; align-items:flex-start; } .career-highlight>span { flex-shrink:0; font-size:10px; padding:7px; } .career-highlight strong { font-size:11px; } .career-highlight p { font-size:10px; } .career-source { padding-left:22px; } .career-next { margin-left:22px; padding:17px; } .career-next strong { font-size:12px; } }
@media(max-width:760px){.career-principle,.journey-principle{margin:22px 0;padding:21px 20px}.career-principle p,.journey-principle p{font-size:17px}.journey-principle p{font-size:19px}}
@media(prefers-reduced-motion:reduce) { .career-card,.career-marker,.career-progress>span { transition:none; } }
@media(max-width:600px) { :root[data-page=journey] #classic-layout .journey-rail { top:116px; } :root[data-page=journey] #classic-layout .journey-chapter { scroll-margin-top:265px; } }
