.career-view{--career-ink:#223f40;--career-gold:#a17b37;padding:0 0 28px;color:var(--career-ink);background:#f8f5ed;border:1px solid #cfc5a9;border-radius:18px;overflow:hidden;font-size:16px}.career-view p{line-height:1.8}.career-view button{font:inherit;cursor:pointer}.career-view button:focus-visible,.career-view a:focus-visible{outline:3px solid #986b20;outline-offset:4px}.career-scene{position:relative;min-height:590px;padding:32px 5%;isolation:isolate;background:#ede9da url('assets/career-palace-v1.webp') center/cover no-repeat}.career-scene:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#faf7ecf5 0%,#faf7ece8 24%,#faf7ec75 52%,#faf7ec00 76%),linear-gradient(0deg,#f8f5ed,transparent 24%)}.career-scene-heading{position:relative;z-index:2}.career-view .eyebrow{color:#947036;font-size:14px;letter-spacing:.16em;margin:0}.career-view h2{font-family:'Noto Serif SC',serif;font-size:clamp(32px,4vw,48px);font-weight:600;letter-spacing:.18em;margin:8px 0 25px}.career-official{position:absolute;height:96%;width:48%;right:0;bottom:0;object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 12px 18px #263f3526)}.career-summary{position:relative;display:grid;grid-template-columns:96px 1fr;gap:12px 20px;max-width:540px;width:52%;align-items:center}.career-insignia{width:100%;height:115px;object-fit:contain;filter:drop-shadow(0 5px 5px #6c59362b)}.career-small-label{font-size:14px;letter-spacing:.08em;color:#8e6934}.career-view .career-identity h3{font-size:clamp(22px,2.4vw,30px);margin:8px 0;line-height:1.4}.career-identity p{font-size:14px;margin:0}.career-growth{grid-column:1/-1;padding:18px 0;border-top:1px solid #af936950;margin-top:15px}.career-score-line{display:flex;align-items:baseline;gap:12px}.career-score-line strong{font:600 38px Georgia,serif;color:#315b57}.career-score-line span{font-size:14px}.career-growth progress{display:block;width:100%;height:8px;appearance:none;border:none;border-radius:10px;overflow:hidden;background:#d9d6c6;margin:14px 0}.career-growth progress::-webkit-progress-bar{background:#d9d6c6}.career-growth progress::-webkit-progress-value{background:linear-gradient(90deg,#315b57,#a88846)}.career-growth progress::-moz-progress-bar{background:#315b57}.career-growth p{font-size:16px;margin:0}.career-hero-tasks{position:relative;width:52%;max-width:540px;margin-top:8px}.career-tasks{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.career-tasks a{font-size:14px;color:#294a45;text-decoration:none;border:1px solid #7c92805e;background:#f8f7eecf;padding:10px 12px;border-radius:6px}.career-tasks a:hover{background:#e1e9dd}.career-scene-caption{position:absolute;right:26px;top:36px;writing-mode:vertical-rl;letter-spacing:.4em;font-family:serif;color:#476762}.career-journey{padding:24px 4%;background:linear-gradient(110deg,#edf1e9,#f6f0df);border-top:1px solid #b4a27666;border-bottom:1px solid #b4a27666}.career-section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:32px 4% 12px}.career-journey .career-section-title{margin:0 0 18px}.career-section-title h3{font-family:serif;font-size:26px;font-weight:600;letter-spacing:.08em;margin:7px 0 0}.career-section-title>p{font-size:14px;color:#6a7161;margin:0}.career-ladder{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px}.career-ladder:before{content:'';position:absolute;top:58px;left:5%;right:5%;height:2px;background:#b8aa7b}.career-ladder li{position:relative;min-width:0}.career-view .career-rank-node{display:flex;align-items:center;flex-direction:column;gap:5px;width:100%;padding:12px 2px;border:1px solid transparent;border-radius:10px;background:transparent;color:#5c6254;min-height:185px}.career-rank-node img{width:85px;max-width:100%;height:91px;object-fit:contain;filter:grayscale(.65);opacity:.7}.career-rank-node strong{font-size:18px;color:#5e6a5b}.career-node-name{font-size:14px;line-height:1.5;text-align:center;min-height:42px}.career-rank-node small{font-size:12px}.career-ladder .is-reached img{opacity:1;filter:none}.career-ladder .is-current .career-rank-node{background:#fff9e3a6;border-color:#b89950;box-shadow:0 4px 20px #a6873320}.career-view .career-rank-node.is-inspected{border-color:#345e58;background:#ffffff75}.career-rank-detail{margin-top:18px;border-top:1px solid #b8aa7b70;padding:18px 12px 0;display:flex;gap:20px;align-items:center;min-height:108px}.career-rank-detail>img{width:78px;height:90px;object-fit:contain}.career-rank-detail h4{font-size:22px;margin:5px 0}.career-rank-detail p{margin:0;font-size:16px}.career-route-note{margin:0 4% 20px;font-size:14px;color:#697060}.career-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 4%}.career-branch{position:relative;border:1px solid #ccc5ac;border-radius:10px;padding:18px;display:flex;flex-direction:column;background:#ffffff6b}.career-branch-art{width:110px;height:110px;object-fit:contain;align-self:center}.career-branch h4{font-family:serif;font-size:21px;margin:12px 0 0}.career-branch p{font-size:14px;flex:1;color:#667061}.career-view .career-branch button{padding:11px 14px;border:1px solid #345d55;color:#f9f3dd;background:#345d55;border-radius:5px;font-size:14px}.career-branch.is-selected{border-color:#ad873d;background:#f2ebd6}.career-branch button:disabled{opacity:.7;cursor:default}.career-honors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 4%}.career-honor{border:1px solid #d2c5a3;border-radius:10px;padding:20px;background:linear-gradient(120deg,#f1e8d0,#fffdf5)}.career-honor img{width:100px;height:110px;display:block;margin:auto;object-fit:contain}.career-honor h4{font-family:serif;font-size:23px;text-align:center;margin:12px 0}.career-honor p,.career-honor li{font-size:14px;line-height:1.8}.career-honor ul{padding-left:20px}.career-honor progress{width:100%;accent-color:#a17b37}.career-honor.is-earned{border-color:#a17b37;box-shadow:0 0 12px #a17b3725}.career-footnote,[data-career-status]{margin:24px 4% 0;font-size:13px;color:#6b7164}.career-view [data-career-retry]{margin:16px 4%;padding:10px 20px;border:1px solid #345d55;background:#345d55;color:#fff;border-radius:5px}.career-view [hidden]{display:none!important}
@media(max-width:1050px){.career-ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}.career-ladder:before{display:none}.career-rank-node img{width:90px}.career-view .career-rank-node{min-height:170px}.career-node-name{min-height:0}.career-branches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.career-view{border-radius:12px}.career-scene{min-height:560px;padding:24px 20px 20px;background-position:65% center}.career-scene:before{background:linear-gradient(90deg,#faf7ecf5,#faf7ecbf 45%,#faf7ec00 85%),linear-gradient(0deg,#f8f5ed 1%,#f8f5edc9 14%,transparent 38%)}.career-view h2{font-size:31px;margin-bottom:26px}.career-official{height:76%;width:64%;right:-13%;bottom:70px;object-position:right bottom}.career-scene-caption{display:none}.career-summary{width:64%;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:start}.career-insignia{height:70px}.career-view .career-identity h3{font-size:21px;margin-top:5px}.career-identity p{font-size:14px;line-height:1.7}.career-growth{margin-top:14px;padding-top:15px}.career-score-line strong{font-size:34px}.career-growth p{font-size:14px}.career-hero-tasks{width:100%;margin-top:38px}.career-tasks a{font-size:14px;padding:10px;flex:1 1 135px}.career-section-title{align-items:start;gap:10px;margin-top:28px}.career-section-title h3{font-size:23px}.career-section-title>p{max-width:110px;text-align:right}.career-journey{padding:24px 16px}.career-ladder{grid-template-columns:1fr;gap:0;margin-left:4px}.career-ladder:before{display:block;top:45px;bottom:45px;left:37px;right:auto;width:2px;height:auto}.career-view .career-rank-node{display:grid;grid-template-columns:76px 1fr auto;grid-template-rows:auto auto;column-gap:14px;min-height:98px;padding:6px 10px 6px 0;align-items:center;text-align:left;border-radius:8px}.career-rank-node img{grid-column:1;grid-row:1/3;width:76px;height:84px}.career-rank-node strong{grid-column:2;align-self:end;font-size:20px}.career-node-name{grid-column:2;grid-row:2;align-self:start;text-align:left;font-size:16px}.career-rank-node small{grid-column:3;grid-row:1/3;max-width:62px;text-align:right;font-size:12px;line-height:1.7}.career-rank-detail{gap:12px;padding:18px 0 0}.career-rank-detail>img{width:60px;height:76px}.career-rank-detail h4{font-size:20px}.career-rank-detail p{font-size:14px}.career-branches{gap:10px}.career-branch{padding:14px 12px}.career-branch-art{width:90px;height:95px}.career-branch h4{font-size:19px}.career-honors{grid-template-columns:1fr}.career-honor{padding:18px}.career-honor img{float:left;width:78px;height:90px;margin:0 18px 10px 0}.career-honor h4{text-align:left;margin-top:6px}.career-honor p{margin:8px 0}.career-honor ul{clear:both}.career-footnote{font-size:13px}}
html[data-theme="dark"] body .career-scene{background-image:url('assets/career-palace-v1.webp')!important;background-color:#233b38!important}html[data-theme="dark"] body .career-scene:before{background:linear-gradient(90deg,#18312ff5,#18312fcc 40%,#18312f30 85%),linear-gradient(0deg,#242e2c,transparent 30%)}html[data-theme="dark"] body .career-journey{background:#283832}html[data-theme="dark"] body .career-small-label,html[data-theme="dark"] body .career-view .eyebrow{color:#d6b66f}html[data-theme="dark"] body .career-score-line strong{color:#e4d5a8}html[data-theme="dark"] body .career-rank-node{color:#e3dfd0}html[data-theme="dark"] body .career-rank-node strong{color:#e3dfd0}html[data-theme="dark"] body .career-view .career-rank-node.is-inspected{background:#456054!important;border-color:#c7ae70}html[data-theme="dark"] body .career-route-note,html[data-theme="dark"] body .career-section-title>p{color:#c5cebd}html[data-theme="dark"] body .career-rank-detail{color:#e3dfd0}
@media(max-width:640px){.career-official{right:0;width:52%;height:78%}.career-summary{width:60%}}
html[data-theme="dark"] body .career-ladder li,html[data-theme="dark"] body .career-ladder li.is-reached{background:transparent!important;border:0!important}html[data-theme="dark"] body .career-summary{background:transparent!important;border:0!important}html[data-theme="dark"] body .career-branch p{color:#c5cebd}

.career-choose-first{padding:1px 0 28px;border-bottom:1px solid #b4a27666;background:#f5f2e8}.career-choose-first .career-section-title{margin-top:26px}html[data-theme="dark"] body .career-choose-first{background:#283832}

.career-choose-first .career-section-title h2{font-size:28px;margin:8px 0 0;letter-spacing:.08em}.career-back-to-routes{margin:18px 4%;padding:10px 16px;border:1px solid #89957b;border-radius:5px;background:transparent;color:inherit;font-size:14px}

.career-character{height:210px;width:100%;position:relative;overflow:hidden;border-radius:12px;background:#f6f1e5;isolation:isolate}.career-character-portrait{position:absolute;inset:-5px;background-image:url('assets/career-characters-atlas.png');background-size:200% 200%;background-repeat:no-repeat;animation:character-breathe 5s ease-in-out infinite;transform-origin:50% 85%}.character-hanlin .career-character-portrait{background-position:0 0}.character-history .career-character-portrait{background-position:100% 0;animation-delay:-1.4s}.character-ritual .career-character-portrait{background-position:0 100%;animation-delay:-2.7s}.character-teaching .career-character-portrait{background-position:100% 100%;animation-delay:-3.6s}.career-character::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fff7dd30 48%,transparent 68%);background-size:250% 100%;animation:character-light 8s ease-in-out infinite;pointer-events:none}.career-branch.is-selected .career-character{box-shadow:0 0 0 2px #a88b58}.career-branch:hover .career-character-portrait{animation-duration:3.5s}@keyframes character-breathe{0%,100%{transform:translateY(2px) scale(1)}50%{transform:translateY(-3px) scale(1.018)}}@keyframes character-light{0%,100%{background-position:100% 0;opacity:.2}50%{background-position:0 0;opacity:.7}}@media(max-width:700px){.career-character{height:220px}}@media(prefers-reduced-motion:reduce){.career-character-portrait,.career-character::after{animation:none}}

.career-official.career-character{width:42%;height:auto;aspect-ratio:1;bottom:60px;right:2%;border-radius:24px;filter:none;mask-image:linear-gradient(to bottom,#000 84%,transparent)}@media(max-width:640px){.career-official.career-character{width:50%;bottom:80px;right:0;opacity:.88}}
.career-official.career-character{position:absolute;pointer-events:none}

/* Transparent, nine-stage outfits for each career. */
.career-character{--outfit-x:0%;--outfit-y:0%;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;isolation:auto;height:auto;aspect-ratio:1}.career-character::after{display:none}.career-character .career-character-portrait{inset:0;background-size:300% 300%;background-position:var(--outfit-x) var(--outfit-y);filter:drop-shadow(0 8px 9px #17292420)}.character-hanlin .career-character-portrait{background-image:url('assets/career-outfits-hanlin.png')}.character-history .career-character-portrait{background-image:url('assets/career-outfits-history.png')}.character-ritual .career-character-portrait{background-image:url('assets/career-outfits-ritual.png')}.character-teaching .career-character-portrait{background-image:url('assets/career-outfits-teaching.png')}.career-official.career-character{mask-image:none;width:48%;bottom:20px;right:0}.career-outfit-preview.career-character{width:230px;height:230px;flex:0 0 230px}.career-rank-detail{align-items:center;flex-wrap:wrap}.career-rank-detail>div:not(.career-character){flex:1;min-width:180px}.career-outfit-label{color:#92702f;font-weight:600}html[data-theme="dark"] .career-outfit-label{color:#e7ca8c}@media(max-width:640px){.career-official.career-character{width:55%;bottom:85px}.career-outfit-preview.career-character{width:100%;height:260px;flex-basis:100%;aspect-ratio:auto}.career-outfit-preview .career-character-portrait{width:260px;height:260px;left:calc(50% - 130px)}.career-character{height:auto}.career-rank-detail>img{width:54px}}

.career-preview-caption{position:absolute;right:3%;bottom:4px;z-index:2;font-size:14px;color:#38554e;background:#faf6e9d9;border-radius:8px;padding:6px 10px;margin:0}@media(max-width:640px){.career-preview-caption{bottom:60px;right:10px;font-size:12px}}html[data-theme="dark"] .career-preview-caption{background:#243e35d9;color:#e4d6b3}
/* Animated experience tube, with actual rank progress independent of outfit preview. */
.career-growth [data-career-progress],.career-growth [data-career-next]{display:none}
.career-xp-labels,.career-xp-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;line-height:1.6}
.career-xp-labels{margin:14px 0 9px;font-weight:700}.career-xp-labels>span:last-child{text-align:right}
.career-xp-tube{--xp:0%;height:30px;position:relative;isolation:isolate;overflow:hidden;border-radius:999px;border:2px solid #967943;background:#243c37;box-shadow:inset 0 3px 7px #0008,0 2px 0 #fff5}
.career-xp-fill{height:100%;width:var(--xp);border-radius:inherit;background:linear-gradient(90deg,#247764,#65bd89 65%,#e7ce80);box-shadow:0 0 12px #9ce6a7;transition:width 1.2s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.career-xp-fill:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff6 50%,transparent 70%);transform:translateX(-100%);animation:career-xp-shimmer 3s ease-in-out infinite}
.career-xp-tube>b{position:absolute;inset:0;display:grid;place-items:center;font:700 14px system-ui;color:#fff8df!important;text-shadow:0 1px 3px #000,0 0 4px #000}
.career-xp-meta{margin-top:8px;color:#385448;font-variant-numeric:tabular-nums}
html[data-theme="dark"] body .career-xp-meta span{color:#d4decb!important}
@keyframes career-xp-shimmer{to{transform:translateX(150%)}}
@media(prefers-reduced-motion:reduce){.career-xp-fill{transition:none}.career-xp-fill:after{animation:none}}
/* Keep progression on a compact, readable paper surface beside the portrait. */
.career-growth{width:100%;max-width:360px;min-width:0;box-sizing:border-box;padding:16px;background:#faf6e9;border:1px solid #c7b990;border-radius:12px;position:relative;z-index:2}
.career-xp-labels{font-size:18px;line-height:1.45;align-items:start;gap:14px}
.career-xp-labels>span{min-width:0}
.career-xp-labels>span:first-child{flex-shrink:0}
.career-xp-labels>span:last-child{max-width:62%;text-wrap:balance}
.career-xp-meta{font-size:14px;flex-wrap:wrap;gap:4px 12px}
html[data-theme="dark"] body .career-growth{background:#24352f;border-color:#73836b}
@media(max-width:640px){.career-growth{max-width:340px;padding:14px}.career-xp-labels{font-size:17px}}

/* Rank palettes remain visible while current rank retains its highlighted border. */
.career-rank-node img{filter:none;opacity:1}
.career-tasks a,.career-task-label{font-weight:400}
.career-tasks .career-task-xp{font-size:16px;font-weight:800;color:#a34827;white-space:nowrap}
html[data-theme="dark"] body .career-tasks .career-task-xp{color:#ffd58a!important;font-weight:800}

/* Keep the selected identity visible on the four-route overview. */
.career-view .career-branch{padding-top:46px}
.career-view .career-branch.is-selected{border:2px solid #a34739;background:#f7ead8;box-shadow:0 5px 18px #8d413419}
.career-current-marker{position:absolute;top:12px;left:12px;padding:6px 12px;background:#a34739;color:#fff6e5;font-size:14px;font-weight:700;border-radius:4px;z-index:2}
.career-current-marker:after{content:'';position:absolute;left:18px;top:100%;border:6px solid transparent;border-top-color:#a34739}
.career-current-marker[hidden],.career-current-position[hidden]{display:none!important}
.career-view .career-branch .career-current-position{flex:0;margin:12px 0;font-size:18px;font-weight:700;color:#8c392f;line-height:1.5}
.career-view .career-branch.is-selected button{background:#a34739;border-color:#a34739;color:#fff6e5}
html[data-theme="dark"] body .career-view .career-branch.is-selected{background:#433e34!important;border-color:#e19b7b!important}
html[data-theme="dark"] body .career-current-marker,html[data-theme="dark"] body .career-view .career-branch.is-selected button{background:#a34739!important;color:#fff6e5!important}
html[data-theme="dark"] body .career-view .career-branch .career-current-position{color:#ffd0ae!important}
@media(max-width:640px){.career-view .career-branch{padding-top:48px}.career-current-marker{left:8px;padding:6px 8px}.career-view .career-branch .career-current-position{font-size:16px}}