:root {
  --ink: #101a1b;
  --ink-soft: #42504f;
  --paper: #f3eee2;
  --paper-light: #faf7ef;
  --line: rgba(16, 26, 27, .18);
  --jade: #6d9080;
  --amber: #dca447;
  --content: 1180px;
  --data: 1360px;
  --article: 1060px;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --display: "ZCOOL XiaoWei", "Noto Serif SC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); line-height: 1.8; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.inner-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: sticky; top: 0; z-index: 12; padding: 0 max(1rem, calc((100vw - var(--data)) / 2)); color: #f4efe3; background: rgba(16,26,27,.98); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .06em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; font-family: var(--display); font-size: 1.2rem; }
.game-brand-mark { overflow: hidden; border-color: rgba(244,239,227,.55); background: #0c1112; }
.game-brand-mark img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.brand-year { margin-left: .15rem; color: var(--amber); font-size: .72em; }
.inner-header nav { display: flex; gap: clamp(.85rem, 1.7vw, 1.6rem); font-size: .78rem; }
.inner-header nav a { color: rgba(244,239,227,.7); transition: color .2s; }
.inner-header nav a:hover, .inner-header nav a[aria-current="page"] { color: #fff; }
.inner-header nav .nav-search { color: #e5bb70; }

.article-hero { padding: 3.4rem max(1rem, calc((100vw - var(--article)) / 2)) 2.7rem; color: #f5f0e6; background-color: #071113; background-image: linear-gradient(100deg, rgba(4,13,16,.98) 0%, rgba(7,18,25,.78) 58%, rgba(5,15,24,.18) 100%), url("assets/game/login-scene.png"); background-position: center, right center; background-size: 100% 100%, auto 135%; background-repeat: no-repeat; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; color: #d7b269; font-size: .72rem; letter-spacing: .12em; }
.article-hero h1 { max-width: 820px; margin: 0; font-family: var(--display); font-size: clamp(2.7rem, 5.4vw, 4.8rem); font-weight: 400; line-height: 1.12; }
.article-lead { max-width: 650px; margin: 1.3rem 0 0; color: rgba(245,240,230,.75); font-size: 1.02rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin-top: 1.4rem; color: rgba(245,240,230,.62); font-size: .76rem; }
.status { color: #efc372; }

.article-shell { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: 3rem; align-items: start; padding: 3rem max(1rem, calc((100vw - var(--article)) / 2)) 4rem; }
.toc { position: sticky; top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.toc p { margin: 0 0 .8rem; color: var(--jade); font-size: .7rem; letter-spacing: .14em; font-weight: 700; }
.toc a { display: block; padding: .4rem 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; transition: color .2s, transform .2s; }
.toc a:hover { color: var(--ink); transform: translateX(4px); }
.article-body { min-width: 0; }
.article-body h2 { scroll-margin-top: 2rem; margin: 3rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--display); font-size: clamp(1.85rem, 3vw, 2.75rem); font-weight: 400; line-height: 1.3; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 2.4rem 0 .7rem; font-size: 1.17rem; }
.article-body p { margin: 0 0 1.2rem; color: var(--ink-soft); }
.article-body strong { color: var(--ink); }
.article-body ul, .article-body ol { margin: 0 0 1.5rem; padding-left: 1.35rem; color: var(--ink-soft); }
.article-body li { margin: .3rem 0; }
.article-body blockquote { margin: 2rem 0; padding: 1rem 1.3rem; border-left: 3px solid var(--amber); color: var(--ink-soft); background: rgba(255,255,255,.42); }
.article-body blockquote p { margin: 0; }
.article-body table, .data-table { width: 100%; border-collapse: collapse; font-size: .84rem; background: rgba(255,255,255,.28); }
.article-body th, .article-body td, .data-table th, .data-table td { padding: .75rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.article-body th, .data-table th { color: var(--ink); background: rgba(109,144,128,.12); font-weight: 700; }
.article-body td { color: var(--ink-soft); }
.checklist { list-style: none; padding-left: 0 !important; }
.checklist li::before { content: "□"; margin-right: .6rem; color: var(--jade); }
.article-ending { margin-top: 3rem !important; color: var(--ink) !important; font-family: var(--display); font-size: 1.7rem; }
.article-welcome { color: var(--ink) !important; font-family: var(--display); font-size: 1.7rem; }
.article-body a { color: #815817; text-decoration: underline; text-decoration-color: rgba(129,88,23,.3); text-underline-offset: .2em; }
.article-inline-link { display: inline-block; margin-left: .35rem; font-weight: 700; }
.article-figure { margin: 2.5rem 0; overflow: hidden; background: #101a1b; }
.article-figure img { width: 100%; max-height: 410px; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.article-figure:hover img { transform: scale(1.025); }
.article-figure figcaption { padding: .65rem .9rem; color: rgba(245,240,230,.68); font-size: .68rem; letter-spacing: .06em; }
.article-figure-wide { margin-left: -2rem; margin-right: -2rem; }
.two-column-list { columns: 2; column-gap: 2rem; }
.question-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; padding: 1px !important; list-style-position: inside; background: var(--line); }
.question-list li { margin: 0; padding: .9rem; color: var(--ink); background: var(--paper-light); }
.article-callout { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 2rem 0; padding: 1.2rem 1.4rem; color: #f3eee2; background: #142424; }
.article-callout span { color: #d8b168; font-size: .67rem; letter-spacing: .12em; }
.article-callout strong { color: #fff; font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.article-callout p { grid-column: 2; margin: 0; color: rgba(243,238,226,.65); font-size: .75rem; }
.article-action-row { display: grid; grid-template-columns: repeat(2,1fr); margin: 1.8rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.article-action-row a { min-height: 105px; display: grid; grid-template-columns: 1fr auto; align-content: center; padding: 1rem 1.2rem; border-right: 1px solid var(--line); text-decoration: none; transition: background .2s, padding .2s; }
.article-action-row a:last-child { border-right: 0; }.article-action-row a:hover { padding-left: 1.55rem; background: rgba(109,144,128,.11); }
.article-action-row span { grid-column: 1/-1; color: var(--jade); font-size: .65rem; letter-spacing: .1em; }.article-action-row strong { font-family: var(--display); font-size: 1.35rem; font-weight: 400; }.article-action-row b { color: #9a6b20; }
.article-mantra { padding: 1.4rem 0; color: #93651e !important; border-top: 1px solid var(--amber); border-bottom: 1px solid var(--amber); font-family: var(--display); font-size: clamp(1.55rem,3vw,2.2rem); text-align: center; }
.knowledge-routes { display: grid; grid-template-columns: repeat(2,1fr); margin: 1.5rem 0 2rem; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.knowledge-routes a { min-height: 132px; display: flex; flex-direction: column; padding: 1.05rem 1.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: color .2s, background .2s; }
.knowledge-routes a:hover { color: var(--ink); background: rgba(220,164,71,.1); }
.knowledge-routes span { color: #98691f; font-size: .68rem; letter-spacing: .08em; }.knowledge-routes strong { margin-top: .3rem; font-size: .88rem; font-weight: 600; }.knowledge-routes b { margin-top: auto; color: var(--jade); font-size: .68rem; }
.article-body > h2, .article-body > h3, .article-body > p, .article-body > ul, .article-body > ol, .article-body > figure, .article-body > aside, .article-body > div, .article-body > blockquote { animation: article-rise .5s ease both; }
@keyframes article-rise { from { opacity: 0; transform: translateY(10px); } }

.cross-links { max-width: var(--content); display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; background: var(--ink); }
.cross-links a { min-height: 145px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem 2rem; color: #eee8db; border-right: 1px solid rgba(255,255,255,.12); transition: background .25s; }
.cross-links a:hover { background: #18302f; }
.cross-links span { color: #d8b168; font-size: .72rem; letter-spacing: .12em; }
.cross-links strong { font-family: var(--display); font-size: 1.7rem; font-weight: 400; }

.data-hero { padding: 3rem max(1rem, calc((100vw - var(--data)) / 2)) 2.3rem; color: #f5f0e6; background-color: var(--ink); background-image: linear-gradient(90deg, rgba(16,26,27,.99) 0%, rgba(13,27,34,.84) 60%, rgba(6,16,25,.2) 100%), url("assets/game/login-scene.png"); background-position: center, right 38%; background-size: 100% 100%, auto 145%; background-repeat: no-repeat; }
.data-hero h1 { margin: .35rem 0 .65rem; font-family: var(--display); font-size: clamp(2.7rem, 4.5vw, 4.2rem); font-weight: 400; line-height: 1.1; }
.data-hero p:last-child { max-width: 700px; color: rgba(245,240,230,.7); }
.data-main { padding: 1.2rem max(1rem, calc((100vw - var(--data)) / 2)) 3.5rem; }
.toolbar { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(130px, .5fr)); gap: .7rem; position: sticky; top: 62px; z-index: 4; padding: .75rem 0; background: var(--paper); }
.control { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 0; padding: .55rem .75rem; color: var(--ink); background: var(--paper-light); outline: none; }
.control:focus { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(109,144,128,.15); }
.result-line { display: flex; justify-content: flex-start; gap: 1.5rem; margin: .6rem 0 .8rem; color: var(--ink-soft); font-size: .76rem; }
.table-wrap { overflow: auto; border-top: 1px solid var(--ink); }
.data-table { min-width: 900px; font-size: .79rem; }
.data-table th, .data-table td { padding: .55rem .62rem; }
.data-table tbody tr:hover { background: rgba(109,144,128,.09); }
.data-table .level { color: #9a6b20; font-weight: 700; }
.task-materials { min-width: 150px; display: flex; flex-wrap: wrap; gap: .38rem .55rem; }
.task-item-icon { display: inline-grid; grid-template-columns: 30px auto; align-items: center; gap: .38rem; color: var(--ink); text-decoration: none; }
.task-item-icon img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; background: rgba(12,24,24,.07); border: 1px solid rgba(16,26,27,.12); transition: transform .16s, border-color .16s, background .16s; }
.task-item-icon span, .task-material-name { font-size: .76rem; line-height: 1.35; }
.task-item-icon:hover img, .task-item-icon:focus-visible img { transform: scale(1.12); border-color: var(--amber); background: #fff; }
.task-item-icon:hover span { color: #8d601d; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 2rem 0; }
.pager button { cursor: pointer; border: 1px solid var(--ink); padding: .55rem .9rem; color: var(--ink); background: transparent; }
.pager button:disabled { opacity: .3; cursor: default; }

.skill-intro { margin-bottom: 1.2rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.skill-layout, .career-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.skill-career-list, .career-guide-content { min-width: 0; }
.career-overview { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.5fr); gap: 2rem; align-items: start; padding: 1rem 0 1.3rem; }
.career-overview > p { margin: 0; color: var(--ink-soft); }
.career-guide-link { min-height: 76px; display: grid; grid-template-columns: 1fr auto; align-content: center; padding: .7rem 1rem; color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); transition: padding .2s, background .2s; }
.career-guide-link:hover { padding-left: 1.35rem; background: rgba(109,144,128,.1); }
.career-guide-link span { grid-column: 1/-1; color: #98691f; font-size: .62rem; }.career-guide-link strong { font-size: .82rem; }.career-guide-link b { color: #98691f; }
.career-advice { margin: 0 0 1.3rem; padding: 1.1rem 1.2rem; color: var(--ink-soft); background: rgba(109,144,128,.09); }
.career-advice p { margin: 0 0 .7rem; }.career-advice p:last-of-type { margin-bottom: 1rem; }
.career-image-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; }
.career-image-strip img { width: 100%; height: 110px; object-fit: contain; background: rgba(255,255,255,.5); }
.career-video { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 1.2rem; align-items: center; margin: 0 0 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.career-video > div:first-child { display: grid; gap: .25rem; }.career-video small { color: #98691f; }.career-video strong { font-family: var(--display); font-size: 1.35rem; font-weight: 400; }.career-video span { color: var(--ink-soft); font-size: .66rem; }
.career-skill-heading { margin: 1.2rem 0 .65rem; color: var(--ink-soft); font-size: .72rem; letter-spacing: .12em; }
@media (max-width: 760px) { .career-overview { grid-template-columns: 1fr; gap: .8rem; }.career-video { grid-template-columns: 1fr; }.career-image-strip { grid-template-columns: repeat(2,1fr); } }
.career-index-main { width: min(1180px,calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; }
.career-index-heading { display: grid; gap: .5rem; padding-bottom: 1.4rem; border-bottom: 3px solid var(--ink); }
.career-index-heading > p { margin: 0; color: #98691f; font-size: .68rem; letter-spacing: .12em; }.career-index-heading > div { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }.career-index-heading h1 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem,4vw,3.5rem); font-weight: 400; }.career-index-heading span { color: var(--ink-soft); font-size: .76rem; }
.career-index-groups section { margin-top: 2rem; }.career-index-groups section > header { display: flex; justify-content: space-between; padding-bottom: .55rem; border-bottom: 1px solid var(--ink); }.career-index-groups section > header span { color: #98691f; font-size: .72rem; letter-spacing: .12em; }.career-index-groups section > header small { color: var(--ink-soft); }
.career-index-groups section > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.career-index-groups a { min-height: 118px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center; padding: 1rem 1.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: padding .2s, background .2s; }.career-index-groups a:hover { padding-left: 1.7rem; background: rgba(109,144,128,.09); }.career-index-groups a > span { grid-column: 1/-1; color: #98691f; font-size: .62rem; }.career-index-groups a strong { font-family: var(--display); font-size: 1.45rem; font-weight: 400; }.career-index-groups a p { grid-column: 1/-1; overflow: hidden; margin: .25rem 0 0; color: var(--ink-soft); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }.career-index-groups a b { grid-column: 2; grid-row: 2; font-weight: 400; }
.career-compact-head { width: min(1180px,calc(100% - 2rem)); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .35rem 2rem; margin: 0 auto; padding: 1.6rem 0 1.1rem; border-bottom: 3px solid var(--ink); }.career-compact-head > p { grid-column: 1/-1; display: flex; gap: .5rem; margin: 0; color: #98691f; font-size: .68rem; }.career-compact-head h1 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem,4vw,3.4rem); font-weight: 400; line-height: 1; }.career-compact-head > div { display: flex; gap: .9rem; color: var(--ink-soft); font-size: .7rem; }.career-compact-head > div a { color: #815817; }
.career-detail-main { width: min(1180px,calc(100% - 2rem)); margin: 0 auto; padding: .8rem 0 3.5rem; }
.career-detail-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 2.5rem; align-items: start; }
.career-detail-layout > .skill-career-list { width: 100%; min-width: 0; overflow: hidden; }
.career-toc { position: sticky; top: 80px; padding: .8rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }.career-toc > p { margin: 0 0 .6rem; color: var(--jade); font-size: .68rem; font-weight: 700; letter-spacing: .14em; }.career-toc nav { display: grid; }.career-toc a { padding: .48rem .55rem; color: var(--ink-soft); border-left: 2px solid transparent; font-size: .74rem; transition: color .2s,border-color .2s,background .2s; }.career-toc a:hover,.career-toc a:focus-visible { color: var(--ink); border-left-color: var(--amber); background: rgba(109,144,128,.1); }
.career-detail-page .skill-career-section { width: 100%; min-width: 0; margin-bottom: 1rem; }.career-detail-page .career-video { grid-template-columns: 150px minmax(0,1fr); margin-top: 0; padding-top: .5rem; border-top: 0; scroll-margin-top: 78px; }.career-detail-page .career-video .video-frame { width: 100%; max-width: 100%; min-width: 0; }.career-detail-page .career-video iframe { width: 100%; min-height: 400px; }.career-info-section,.career-skill-section { min-width: 0; scroll-margin-top: 78px; }.career-detail-page .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
@media (max-width: 800px) { .career-detail-layout { grid-template-columns: 1fr; gap: 1rem; }.career-toc { position: static; overflow-x: auto; padding: .5rem 0; }.career-toc > p { display: none; }.career-toc nav { display: flex; min-width: max-content; }.career-toc a { border-left: 0; border-bottom: 2px solid transparent; }.career-toc a:hover,.career-toc a:focus-visible { border-left: 0; border-bottom-color: var(--amber); } }
@media (max-width: 700px) { .career-index-heading > div { display: grid; gap: .35rem; }.career-index-groups section > div { grid-template-columns: 1fr; }.career-index-groups a { border-right: 0; }.career-compact-head { grid-template-columns: 1fr; }.career-compact-head > div { margin-top: .5rem; }.career-detail-page .career-video { grid-template-columns: 1fr; }.career-detail-page .career-video iframe { min-height: 220px; } }
.career-side-nav { max-height: calc(100vh - 92px); position: sticky; top: 78px; overflow: auto; padding: .9rem 0 1rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.career-side-nav > p { margin: 0 0 .65rem; color: var(--jade); font-size: .68rem; font-weight: 700; letter-spacing: .14em; }
.career-side-nav strong { display: block; margin: .9rem 0 .3rem; color: var(--ink); font-size: .72rem; }
.career-side-nav a { display: block; padding: .28rem .5rem; color: var(--ink-soft); border-left: 2px solid transparent; font-size: .76rem; line-height: 1.45; transition: color .2s, border-color .2s, background .2s; }
.career-side-nav a:hover, .career-side-nav a.active { color: var(--ink); border-left-color: var(--amber); background: rgba(109,144,128,.1); }
.skill-career-section { scroll-margin-top: 82px; margin-bottom: 3.4rem; }
.skill-career-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: .7rem; }
.skill-career-head p { margin: 0 0 .15rem; color: #9a6b20; font-size: .68rem; letter-spacing: .12em; }
.skill-career-head h2 { margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 400; line-height: 1.15; }
.skill-career-head > span { color: var(--ink-soft); font-size: .76rem; }
.skill-career-section .table-wrap { border-top-color: var(--ink); }
.skill-career-section .skills-table { min-width: 760px; }
.skill-career-section .skills-table td { height: 42px; }
.skill-cell { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 38px; line-height: 1.45; outline: none; cursor: help; }
.skill-icon { width: 34px; height: 34px; display: block; object-fit: contain; background: #111817; border: 1px solid rgba(173, 151, 91, .36); box-shadow: 0 2px 8px rgba(8, 13, 12, .16); transition: transform .16s ease, border-color .16s ease; }
.skill-cell:hover .skill-icon { transform: translateY(-2px) scale(1.08); border-color: var(--gold); }
.skill-icon-missing { color: var(--gold); font: 500 15px/34px "ZCOOL XiaoWei", serif; text-align: center; background: rgba(21, 31, 29, .08); }
.skill-tooltip { position: fixed; z-index: 80; left: 12px; top: 12px; width: min(310px, calc(100vw - 24px)); padding: 15px 16px 13px; color: #e9e4d8; background: rgba(13, 22, 21, .98); border-top: 2px solid var(--gold); box-shadow: 0 12px 32px rgba(5, 10, 9, .28); opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.skill-tooltip strong { display: block; margin-bottom: 7px; color: #fff; font-family: var(--display); font-size: 1.08rem; font-weight: 400; }
.skill-tooltip > span:not(.skill-tooltip-meta) { display: block; color: #d7d2c7; font-size: .76rem; line-height: 1.65; }
.skill-tooltip-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.skill-tooltip-meta b { color: #d6bd7b; font-size: .66rem; font-weight: 500; }
.skill-tooltip-meta b + b::before { content: '·'; margin-right: 5px; color: #716c61; }
.skill-tooltip small { display: block; margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.12); color: #8e978f; font-size: .62rem; letter-spacing: .08em; }
.skill-cell:hover .skill-tooltip, .skill-cell:focus .skill-tooltip, .skill-cell:focus-within .skill-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }

.media-main { padding: 3rem max(1rem, calc((100vw - var(--content)) / 2)) 4rem; }
.career-layout { grid-template-columns: 180px minmax(0, 1fr); }
.media-section { margin-bottom: 3.5rem; }
.media-section, .magic-guide { scroll-margin-top: 92px; }
.media-section h2 { margin: 0 0 1.5rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; }
.atlas-image { display: block; width: 100%; height: auto; margin-bottom: 2rem; background: #d8cda9; box-shadow: 0 18px 50px rgba(16,26,27,.12); }
.video-list { border-top: 1px solid var(--line); }
.video-item { display: grid; grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr); gap: 2rem; align-items: center; scroll-margin-top: 82px; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.video-item h3 { margin: 0 0 .4rem; font-family: var(--display); font-size: 2rem; font-weight: 400; }
.video-item p { margin: 0; color: var(--ink-soft); font-size: .82rem; }
.video-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0b1011; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.magic-guide { max-width: 860px; }
.magic-guide p { color: var(--ink-soft); }

.article-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 2rem; }
.article-item-grid a, .article-item-grid .effect-record { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1rem; color: inherit; text-decoration: none; border: 1px solid var(--line); background: rgba(255,255,255,.48); transition: transform .2s, border-color .2s, background .2s; }
.article-item-grid a:hover { transform: translateY(-2px); border-color: #9a6b20; background: rgba(255,255,255,.78); }
.article-item-grid img { width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain; image-rendering: pixelated; }
.article-item-grid span { display: grid; gap: .16rem; min-width: 0; }
.article-item-grid strong { font-family: var(--display); font-size: 1.08rem; }
.article-item-grid em, .article-item-grid small { font-style: normal; color: var(--ink-soft); }
.article-item-grid small { font-size: .72rem; }

@media (max-width: 640px) { .article-item-grid { grid-template-columns: 1fr; } }

.table-scroll { max-width: 100%; overflow-x: auto; margin: 1rem 0 2rem; }
.table-scroll table { min-width: 680px; margin: 0; }
.archive-source img { max-height: none; object-fit: contain; background: #fff; }
.archive-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0 2.5rem; }
.archive-gallery figure { min-width: 0; margin: 0; overflow: hidden; background: #101a1b; }
.archive-gallery img { width: 100%; height: 260px; display: block; object-fit: contain; background: #f8f5ed; }
.archive-gallery figcaption { padding: .55rem .75rem; color: rgba(245,240,230,.68); font-size: .68rem; }
.archive-gallery-stack { grid-template-columns: 1fr; }
.archive-gallery-stack img, .archive-gallery-pages img { height: auto; max-height: none; }
.archive-gallery-pages { grid-template-columns: 1fr; }
.inline-entity { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.inline-entity img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; background: rgba(16,26,27,.06); border: 1px solid var(--line); }

@media (max-width: 640px) { .archive-gallery { grid-template-columns: 1fr; }.archive-gallery img { height: auto; max-height: 420px; } }
.magic-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); gap: 2rem; align-items: center; padding: 2rem 0; border-top: 1px solid var(--line); }
.magic-step img { max-width: 100%; max-height: 340px; object-fit: contain; justify-self: center; }
.skills-table td { white-space: normal; min-width: 190px; }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem max(1rem, calc((100vw - var(--content)) / 2)); color: rgba(244,239,227,.65); background: #0b1213; font-size: .76rem; }
.site-footer p { margin: 0; }
.mobile-quick-nav { display: none; }

.section-kicker { margin: 0; color: #9a6b20; font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 3rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--ink); }
.section-intro h2, .route-method h2 { margin: .2rem 0 0; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 400; line-height: 1.08; }
.section-intro > p { max-width: 520px; margin: 0; color: var(--ink-soft); font-size: .8rem; }
.search-control { min-height: 44px; display: flex; align-items: center; gap: .65rem; border: 1px solid var(--line); padding: 0 .8rem; background: var(--paper-light); }
.search-control span { color: var(--jade); font-size: 1.35rem; }
.search-control input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.empty-state { grid-column: 1 / -1; padding: 2rem 0; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.data-note, .source-note { margin-top: 1rem; padding: 1rem 1.2rem; border-left: 3px solid var(--amber); background: rgba(255,255,255,.35); }
.data-note p, .source-note p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .76rem; }

.monster-hero { min-height: 360px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.monster-hero-copy { position: relative; z-index: 2; }
.monster-hero-copy > p:last-of-type { max-width: 660px; }
.monster-hero-art { width: min(360px, 32vw); height: 290px; position: absolute; right: max(1rem, calc((100vw - var(--data)) / 2)); bottom: 0; object-fit: contain; object-position: center bottom; image-rendering: auto; filter: drop-shadow(0 18px 25px rgba(0,0,0,.42)); animation: monster-arrive .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-stats { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.4rem; color: rgba(245,240,230,.64); font-size: .72rem; }
.hero-stats span { padding-left: .8rem; border-left: 1px solid rgba(255,255,255,.22); }
.hero-stats strong { color: #efc372; font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.monster-main { padding: 2.6rem max(1rem, calc((100vw - var(--data)) / 2)) 4rem; }
.monster-browser { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 1.5rem; align-items: start; }
.monster-level-sidebar { position: sticky; top: 76px; padding-top: .75rem; border-top: 1px solid var(--ink); }
.monster-level-sidebar > p { margin: 0 0 .45rem; color: #96681f; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.monster-level-sidebar div { display: grid; }
.monster-level-sidebar button { min-height: 35px; padding: 0 .15rem; border: 0; border-bottom: 1px solid rgba(16,26,27,.1); color: var(--ink-soft); background: transparent; text-align: left; cursor: pointer; transition: color .18s, padding-left .18s, background .18s; }
.monster-level-sidebar button:hover { padding-left: .55rem; color: var(--ink); }
.monster-level-sidebar button.is-active { padding-left: .55rem; color: #7c5217; background: rgba(190,143,67,.11); font-weight: 700; }
.monster-level-sidebar button.is-active::before { content: '›'; margin-right: .4rem; }
.monster-results-column { min-width: 0; }
.monster-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(150px, .28fr); gap: .7rem; position: sticky; top: 62px; z-index: 5; padding: .75rem 0; background: var(--paper); }
.monster-list { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .7rem; padding-top: .8rem; border-top: 1px solid var(--ink); }
.monster-card { min-width: 0; min-height: 262px; display: grid; grid-template-rows: 112px auto auto 1fr; align-content: start; padding: .65rem; border: 1px solid rgba(16,26,27,.13); background: rgba(255,255,255,.36); transition: transform .2s, border-color .2s, background .2s; }
.monster-card:hover { transform: translateY(-3px); border-color: rgba(154,107,32,.45); background: rgba(255,255,255,.72); }
.monster-preview { height: 112px; display: grid; place-items: center; overflow: hidden; background: rgba(109,144,128,.07); }
.monster-preview img { max-width: 104px; max-height: 104px; object-fit: contain; transition: transform .24s; }
.monster-card:hover .monster-preview img { transform: translateY(-2px) scale(1.06); }
.monster-card-heading { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; padding: .55rem 0 .45rem; border-bottom: 1px solid rgba(16,26,27,.1); }
.monster-card-heading h3 { overflow: hidden; margin: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.monster-card-heading span { flex: 0 0 auto; color: #96681f; font-size: .62rem; font-weight: 700; }
.monster-location { min-width: 0; margin: .4rem 0 0; color: var(--ink-soft); font-size: .6rem; line-height: 1.45; }
.monster-location span { margin-right: .35rem; color: #96681f; font-weight: 700; }
.monster-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .16rem .55rem; align-content: start; margin: .45rem 0 0; }
.monster-stats div { display: flex; justify-content: space-between; gap: .25rem; }
.monster-stats dt { color: var(--ink-soft); font-size: .58rem; }
.monster-stats dd { overflow: hidden; margin: 0; font-size: .64rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
@keyframes monster-arrive { from { opacity: 0; transform: translate(28px,18px) scale(.94); } }

.map-hero { min-height: 520px; display: flex; align-items: end; position: relative; isolation: isolate; padding: 4rem max(1rem, calc((100vw - var(--data)) / 2)); color: #f6f1e7; background: #071113 url("assets/game/map-gallery/清阴关.png") center 42% / cover no-repeat; }
.map-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,12,14,.94) 0%, rgba(5,13,16,.58) 50%, rgba(5,13,16,.18) 100%), linear-gradient(0deg, rgba(4,12,14,.85), transparent 55%); }
.map-hero-copy { max-width: 690px; animation: map-copy-arrive .7s cubic-bezier(.2,.7,.2,1) both; }
.map-hero h1 { margin: .3rem 0 .8rem; font-family: var(--display); font-size: clamp(3.5rem, 6vw, 6.2rem); font-weight: 400; line-height: .95; }
.map-hero-copy > p:last-of-type { max-width: 610px; color: rgba(246,241,231,.72); }
.map-hero-copy > a { display: inline-block; margin-top: .8rem; padding-bottom: .2rem; color: #efc372; border-bottom: 1px solid rgba(239,195,114,.55); font-size: .8rem; }
@keyframes map-copy-arrive { from { opacity: 0; transform: translateY(20px); } }
.route-method { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); gap: 4rem; padding: 3rem max(1rem, calc((100vw - var(--data)) / 2)); color: #eee8dc; background: var(--ink); }
.route-method .section-kicker { color: #dfb565; }
.route-method ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.18); }
.route-method li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.route-method li span { color: #e4b967; font-size: .7rem; }
.route-method li p { margin: 0; color: rgba(238,232,220,.72); font-size: .82rem; }
.hidden-route-section, .map-gallery-section { padding: 3rem max(1rem, calc((100vw - var(--data)) / 2)) 4rem; }
.hidden-route-section { background: var(--paper-light); }
.route-search, .map-search { max-width: 620px; margin-top: 1rem; }
.route-regions { border-top: 1px solid var(--ink); }
.route-region { border-bottom: 1px solid var(--line); }
.route-region summary { min-height: 66px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; cursor: pointer; list-style: none; }
.route-region summary::-webkit-details-marker { display: none; }
.route-region summary span { font-family: var(--display); font-size: 1.4rem; }
.route-region summary strong { width: 34px; height: 34px; display: grid; place-items: center; color: #efe8da; background: var(--ink); font-size: .72rem; }
.route-region[open] summary strong { color: var(--ink); background: var(--amber); }
.route-table { padding-bottom: 1rem; animation: route-open .24s ease both; }
.route-line { min-height: 52px; display: grid; grid-template-columns: minmax(160px,.8fr) 28px minmax(180px,1fr) minmax(190px,.8fr); gap: .8rem; align-items: center; padding: .55rem 0; border-top: 1px solid rgba(16,26,27,.1); }
.route-line > span { color: var(--ink-soft); font-size: .8rem; }
.route-line b { color: #a06d21; font-weight: 400; }
.route-line > strong { font-size: .85rem; }
.route-line small { color: rgba(66,80,79,.7); font-size: .68rem; }
@keyframes route-open { from { opacity: 0; transform: translateY(-5px); } }
.source-note p:last-child { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.source-note a { color: #8b611f; border-bottom: 1px solid rgba(139,97,31,.35); }
.map-gallery-section { background: var(--paper); }
.map-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--ink); }
.map-figure { margin: 0; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.map-figure:nth-child(3n+2) { padding-left: 1rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.map-figure:nth-child(3n) { padding-left: 1rem; }
.map-figure > div { aspect-ratio: 16/10; overflow: hidden; background: #0b1112; }
.map-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s; }
.map-figure:hover img { transform: scale(1.035); filter: brightness(1.08); }
.map-figure figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .55rem; }
.map-figure strong { font-family: var(--display); font-size: 1.05rem; font-weight: 400; }

/* Interactive player atlas */
.map-atlas { background: var(--paper); }
.atlas-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.55fr); align-items: end; gap: 4rem; padding: 3.2rem max(1rem, calc((100vw - var(--data)) / 2)) 2.4rem; color: #eee9df; background: #081213; }
.atlas-heading h1 { margin: .25rem 0 .65rem; font-family: var(--display); font-size: clamp(3rem,5vw,5.4rem); font-weight: 400; line-height: 1; }
.atlas-heading p { max-width: 650px; margin-bottom: 0; color: rgba(238,233,223,.65); }
.atlas-heading .breadcrumb { color: #deb361; }
.atlas-search { margin-bottom: .35rem; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.atlas-search input { color: #f4efe5; }.atlas-search input::placeholder { color: rgba(244,239,229,.45); }
.world-explorer, .region-explorer, .route-detail-section { padding: 2.5rem max(1rem, calc((100vw - var(--data)) / 2)) 3.5rem; scroll-margin-top: 68px; }
.world-explorer { background: #101a1a; color: #eee9df; }
.region-explorer { background: var(--paper-light); }
.route-detail-section { background: var(--paper); }
.atlas-section-title { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: end; gap: .8rem; margin-bottom: 1.4rem; }
.atlas-section-title > span { color: var(--amber); font-size: .72rem; letter-spacing: .12em; }
.atlas-section-title .section-kicker { margin: 0; }
.atlas-section-title h2 { margin: .08rem 0 0; font-family: var(--display); font-size: clamp(2rem,3.4vw,3.3rem); font-weight: 400; line-height: 1; }
.atlas-section-title > p { margin: 0; color: rgba(238,233,223,.55); font-size: .72rem; }
.atlas-section-title > button { cursor: pointer; border: 0; border-bottom: 1px solid rgba(12,28,29,.35); padding: .35rem 0; color: var(--ink-soft); background: transparent; }
.world-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.45fr); gap: 1.4rem; align-items: stretch; }
.world-map-stage { position: relative; overflow: hidden; border: 1px solid rgba(230,185,103,.28); background: #170e0a; }
.world-map-stage > img { width: 100%; display: block; }
.world-hotspots { position: absolute; inset: 0; }
.world-hotspots button { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); cursor: pointer; border: 0; padding: 0; color: #fff7e5; background: transparent; text-shadow: 0 1px 4px #2a1005; }
.world-hotspots i { width: 15px; height: 15px; display: block; margin: 0 auto .18rem; border: 3px solid #fff0c8; border-radius: 50%; background: #b62c25; box-shadow: 0 0 0 3px rgba(30,8,4,.72), 0 0 16px rgba(255,192,76,.75); transition: transform .2s; }
.world-hotspots span { display: flex; align-items: center; gap: .25rem; padding: .15rem .32rem; border-radius: 2px; background: rgba(38,16,8,.82); font-size: .65rem; white-space: nowrap; }
.world-hotspots b { color: #f0c36d; font-size: .58rem; }
.world-hotspots button:hover i, .world-hotspots button.is-active i { transform: scale(1.35); background: #f0b63e; }
.region-index { border-top: 1px solid rgba(255,255,255,.15); overflow: auto; }
.region-index button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding: .65rem .2rem; color: rgba(238,233,223,.72); background: transparent; text-align: left; }
.region-index button:hover, .region-index button.is-active { color: #fff; padding-left: .65rem; background: rgba(255,255,255,.06); }
.region-index strong { color: #deb361; font-size: .62rem; font-weight: 500; white-space: nowrap; }
.region-workspace { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr); border-top: 1px solid var(--ink); }
.region-map-frame { min-width: 0; margin: 0; padding: 1.1rem 1.3rem 0 0; border-right: 1px solid var(--line); }
.region-map-frame img { width: 100%; display: block; border: 1px solid rgba(91,52,20,.25); box-shadow: 0 14px 35px rgba(45,28,12,.12); }
.region-map-frame figcaption { padding: .7rem 0; color: var(--ink-soft); font-size: .7rem; }
.route-browser { min-width: 0; padding: 1.1rem 0 0 1.3rem; }
.route-browser-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.route-browser-head small, .scene-preview small { display: block; color: var(--ink-soft); font-size: .62rem; }
.route-browser-head strong { display: block; margin-top: .15rem; font-family: var(--display); font-size: 1.45rem; font-weight: 400; }
.route-browser-head > span { color: #9b681b; font-size: .68rem; }
.route-list { max-height: 530px; overflow: auto; }
.route-list button { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 25px minmax(0,1fr) auto; align-items: center; gap: .45rem; cursor: pointer; border: 0; border-bottom: 1px solid var(--line); padding: .72rem .15rem; color: var(--ink); background: transparent; text-align: left; }
.route-list button:hover, .route-list button.is-active { padding-left: .55rem; background: rgba(217,164,65,.1); }
.route-list small { display: block; color: var(--ink-soft); font-size: .56rem; }
.route-list strong { display: block; margin-top: .12rem; font-size: .76rem; font-weight: 500; }
.route-list b { color: #b47b24; text-align: center; }
.route-list em { padding: .16rem .32rem; color: #fff; background: #9f271f; font-size: .52rem; font-style: normal; letter-spacing: .08em; white-space: nowrap; }
.route-detail-section .atlas-section-title > p { color: var(--ink-soft); }
.route-detail-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(340px,.6fr); gap: 2rem; border-top: 1px solid var(--ink); padding-top: 1.3rem; }
.route-answer { min-width: 0; }
.route-answer-label { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .62rem; }
.route-path { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 1rem; }
.route-path strong { font-family: var(--display); font-size: clamp(1.45rem,2.4vw,2.2rem); font-weight: 400; }
.route-path strong:last-child { color: #9f271f; }
.route-path span { padding: .35rem .6rem; color: #7b551f; border-top: 1px solid #c99b50; border-bottom: 1px solid #c99b50; font-size: .64rem; white-space: nowrap; }
#detail-note { color: var(--ink-soft); font-size: .76rem; }
.route-answer ol { margin: 1.2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.route-answer li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.route-answer li span { color: #a87527; font-size: .62rem; }.route-answer li p { margin: 0; color: var(--ink-soft); font-size: .72rem; }
.scene-preview { margin: 0; min-width: 0; }
.scene-preview[hidden] { display: none; }
.scene-preview > button { position: relative; width: 100%; display: block; overflow: hidden; cursor: zoom-in; border: 0; padding: 0; background: #0a1213; }
.scene-preview img { width: 100%; aspect-ratio: 1926/1115; object-fit: cover; display: block; background: #0a1213; transition: transform .3s, filter .3s; }
.scene-preview > button:hover img { transform: scale(1.015); filter: brightness(.88); }
.scene-preview > button > span { position: absolute; right: .7rem; bottom: .7rem; padding: .35rem .55rem; color: #fff; background: rgba(4,12,13,.82); font-size: .62rem; }
.scene-preview figcaption { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .65rem 0; }
.scene-preview figcaption small { grid-column: 1 / -1; }
.scene-preview strong { display: block; margin-top: .15rem; font-family: var(--display); font-size: 1.2rem; font-weight: 400; }
.scene-preview figcaption > span { align-self: end; color: var(--ink-soft); font-size: .62rem; }
.scene-unavailable { min-height: 330px; display: grid; align-content: center; justify-items: center; padding: 2rem; border: 1px dashed var(--line); color: var(--ink-soft); background: rgba(255,255,255,.25); text-align: center; }
.scene-unavailable[hidden] { display: none; }
.scene-unavailable span { font-family: var(--display); font-size: 1.7rem; color: var(--ink); }
.scene-unavailable p { max-width: 330px; margin: .6rem 0 0; font-size: .72rem; }
.map-lightbox { width: min(96vw,1500px); max-width: none; max-height: 94vh; border: 1px solid rgba(225,181,96,.5); padding: 2.7rem .7rem .7rem; color: #eee9df; background: #071011; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.map-lightbox::backdrop { background: rgba(2,8,9,.88); backdrop-filter: blur(5px); }
.map-lightbox img { width: 100%; max-height: calc(94vh - 5.5rem); display: block; object-fit: contain; }
.map-lightbox button { position: absolute; top: .65rem; right: .7rem; cursor: pointer; border: 0; color: #eee9df; background: transparent; }
.map-lightbox p { margin: .55rem 0 0; color: rgba(238,233,223,.65); font-size: .7rem; }

/* Named item catalog */
.item-catalog-page { background: var(--paper); }
.item-catalog-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 3rem; padding: 3.4rem max(1rem, calc((100vw - var(--data)) / 2)) 2.5rem; color: #f0ebe0; background: #081213; }
.item-catalog-heading h1 { margin: .25rem 0 .65rem; font-family: var(--display); font-size: clamp(3.2rem,5.6vw,5.8rem); font-weight: 400; line-height: 1; }
.item-catalog-heading > div > p:last-child { max-width: 660px; color: rgba(240,235,224,.65); }
.catalog-stats { display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.catalog-stats span { display: grid; align-content: center; min-height: 72px; padding: .7rem 1rem; color: rgba(240,235,224,.55); border-right: 1px solid rgba(255,255,255,.14); font-size: .62rem; white-space: nowrap; }
.catalog-stats span:last-child { border-right: 0; }.catalog-stats strong { color: #e7ba68; font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.item-query-bar { display: grid; grid-template-columns: minmax(280px,1fr) 220px 170px 108px; gap: .7rem; margin-top: 1.2rem; }
.item-query-bar select { min-height: 46px; border: 1px solid var(--line); padding: 0 .8rem; color: var(--ink); background: var(--paper-light); }
.item-query-bar > button { min-height: 46px; cursor: pointer; border: 1px solid var(--ink); padding: 0 .8rem; color: var(--ink); background: transparent; }
.item-query-bar > button:hover { color: #fff; background: var(--ink); }
.item-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); scroll-margin-top: 76px; }
.item-record { width: 100%; min-height: 112px; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: .85rem; cursor: pointer; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .8rem; color: var(--ink); background: transparent; text-align: left; transition: background .18s, transform .18s; }
.item-record:hover, .item-record:focus-visible { z-index: 1; background: rgba(218,169,76,.1); outline: 1px solid rgba(156,108,36,.45); transform: translateY(-1px); }
.item-record-icon { width: 64px; height: 64px; display: grid; place-items: center; background: rgba(10,24,25,.055); }
.item-record-icon img { max-width: 54px; max-height: 54px; image-rendering: pixelated; }
.item-record-main { min-width: 0; align-self: center; }
.item-record-heading { display: flex; justify-content: space-between; align-items: start; gap: .7rem; }
.item-record-heading strong { font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.item-record-heading > span { display: flex; gap: .25rem; flex: 0 0 auto; }
.item-record-heading em, .item-record-heading i { padding: .08rem .35rem; font-size: .56rem; font-style: normal; line-height: 1.55; }
.item-record-heading em { color: #8f621f; border: 1px solid rgba(143,98,31,.28); }.item-record-heading i { color: #47695e; background: rgba(109,144,128,.12); }
.item-record-description { display: -webkit-box; max-width: 760px; overflow: hidden; margin-top: .28rem; color: var(--ink-soft); font-size: .7rem; line-height: 1.58; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item-record > b { align-self: end; color: #8f621f; font-size: .58rem; font-weight: 500; white-space: nowrap; }
.item-dialog small { display: block; margin-bottom: .35rem; color: rgba(243,238,227,.5); font-size: .62rem; }
.item-dialog #item-dialog-description { color: rgba(243,238,227,.7); font-size: .74rem; line-height: 1.7; }

.item-hero { min-height: 390px; display: flex; align-items: center; overflow: hidden; position: relative; }
.item-hero-copy { max-width: 660px; position: relative; z-index: 2; }
.item-hero-cloud { width: min(440px, 38vw); height: 330px; position: absolute; right: max(1rem, calc((100vw - var(--data)) / 2)); top: 50%; transform: translateY(-50%); }
.item-hero-cloud span { width: 68px; height: 68px; display: grid; place-items: center; position: absolute; border: 1px solid rgba(239,195,114,.28); background: rgba(7,17,19,.74); box-shadow: 0 16px 28px rgba(0,0,0,.24); animation: item-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.item-hero-cloud img { max-width: 48px; max-height: 48px; image-rendering: pixelated; }
.item-hero-cloud span:nth-child(1) { left: 4%; top: 14%; }.item-hero-cloud span:nth-child(2) { left: 22%; top: 2%; }.item-hero-cloud span:nth-child(3) { left: 41%; top: 18%; }.item-hero-cloud span:nth-child(4) { left: 63%; top: 4%; }.item-hero-cloud span:nth-child(5) { left: 81%; top: 21%; }
.item-hero-cloud span:nth-child(6) { left: 10%; top: 43%; }.item-hero-cloud span:nth-child(7) { left: 31%; top: 37%; }.item-hero-cloud span:nth-child(8) { left: 53%; top: 47%; }.item-hero-cloud span:nth-child(9) { left: 75%; top: 42%; }
.item-hero-cloud span:nth-child(10) { left: 0; top: 72%; }.item-hero-cloud span:nth-child(11) { left: 21%; top: 69%; }.item-hero-cloud span:nth-child(12) { left: 43%; top: 76%; }.item-hero-cloud span:nth-child(13) { left: 65%; top: 70%; }.item-hero-cloud span:nth-child(14) { left: 84%; top: 76%; }
.item-hero-cloud span:nth-child(n+15) { display: none; }
.item-hero-cloud span:nth-child(2n) { animation-delay: .08s; }.item-hero-cloud span:nth-child(3n) { animation-delay: .14s; }
@keyframes item-rise { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.item-main { padding: 2.8rem max(1rem, calc((100vw - var(--data)) / 2)) 4rem; }
.item-category-bar { display: flex; gap: 0; overflow-x: auto; margin-top: 1.4rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.item-category-bar button { min-width: max-content; display: flex; align-items: baseline; gap: .45rem; cursor: pointer; border: 0; border-bottom: 2px solid transparent; padding: .72rem .85rem .62rem; color: var(--ink-soft); background: transparent; }
.item-category-bar button:hover, .item-category-bar button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--amber); }
.item-category-bar small { color: #9a6b20; font-size: .58rem; font-variant-numeric: tabular-nums; }
.item-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1px; scroll-margin-top: 76px; border: 1px solid var(--line); background: var(--line); }
.item-icon { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; cursor: zoom-in; border: 0; padding: .5rem; background: var(--paper-light); transition: background .18s, transform .18s; }
.item-icon:hover, .item-icon:focus-visible { z-index: 1; background: #fff; outline: 1px solid var(--amber); transform: scale(1.07); }
.item-icon img { max-width: 46px; max-height: 46px; image-rendering: pixelated; transition: transform .18s; }
.item-icon:hover img { transform: scale(1.12); }
.item-dialog { width: min(680px, calc(100vw - 2rem)); grid-template-columns: 190px minmax(0,1fr); gap: 1.5rem; align-items: center; border: 1px solid rgba(239,195,114,.45); padding: 2.8rem 2rem 2rem; color: #f3eee3; background: #101a1b; text-align: left; box-shadow: 0 26px 80px rgba(0,0,0,.45); }
.item-dialog[open] { display: grid; }
.item-dialog::backdrop { background: rgba(3,9,10,.78); backdrop-filter: blur(4px); }
.item-dialog-visual { width: 190px; height: 190px; display: grid; place-items: center; background: rgba(255,255,255,.04); }
.item-dialog img { max-width: 150px; max-height: 150px; display: block; object-fit: contain; image-rendering: pixelated; }
.item-dialog strong { display: block; color: #efc372; font-family: var(--display); font-size: 1.4rem; font-weight: 400; }
.item-dialog p { margin: .35rem 0 0; color: rgba(243,238,227,.55); font-size: .68rem; }
.item-dialog-close { position: absolute; top: .7rem; right: .8rem; cursor: pointer; border: 0; color: rgba(243,238,227,.7); background: transparent; font-size: .72rem; }

@media (max-width: 1100px) {
  .monster-list { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .item-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  .inner-header { min-height: 60px; padding: 0 1rem; }.inner-header nav { display: none; }
  .article-shell { grid-template-columns: 1fr; gap: 2rem; }.toc { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem 1rem; }.toc p { grid-column: 1/-1; }
  .article-figure-wide { margin-left: 0; margin-right: 0; }.article-figure img { max-height: 300px; }.two-column-list { columns: 1; }.question-list { grid-template-columns: 1fr 1fr; }.article-callout { grid-template-columns: 1fr; }.article-callout p { grid-column: 1; }.article-action-row, .knowledge-routes { grid-template-columns: 1fr; }.article-action-row a { border-right: 0; border-bottom: 1px solid var(--line); }
  .cross-links { grid-template-columns: 1fr; }.cross-links a { min-height: 125px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .toolbar { grid-template-columns: 1fr; position: static; }.video-item, .magic-step { grid-template-columns: 1fr; }.video-item h3 { font-size: 1.65rem; }
  .task-materials { min-width: 132px; }.task-item-icon { grid-template-columns: 28px auto; }.task-item-icon img { width: 28px; height: 28px; }
  .mobile-quick-nav { height: 64px; display: grid; grid-template-columns: repeat(6,1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; color: #eee9de; background: rgba(7,17,19,.98); border-top: 1px solid rgba(255,255,255,.13); }
  .mobile-quick-nav a { display: grid; place-items: center; align-content: center; gap: .05rem; color: rgba(238,233,222,.7); font-size: .62rem; }
  .mobile-quick-nav a[aria-current="page"] { color: #fff; }
  .mobile-quick-nav span { color: #e4b967; font-family: var(--display); font-size: 1.15rem; }
  .site-footer { flex-direction: column; }
  .section-intro { align-items: start; flex-direction: column; gap: .8rem; }
  .monster-hero { min-height: 420px; align-items: start; padding-top: 3rem; }.monster-hero-copy { max-width: 78%; }.monster-hero-art { width: 42vw; height: 190px; right: .4rem; }.hero-stats { gap: .4rem .8rem; }.hero-stats span { display: grid; }
  .monster-main { padding: 2rem 1rem 3rem; }.monster-browser { grid-template-columns: 1fr; gap: .65rem; }.monster-level-sidebar { position: static; overflow: hidden; padding-top: .55rem; }.monster-level-sidebar > p { margin-bottom: .5rem; }.monster-level-sidebar div { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .45rem; scrollbar-width: thin; }.monster-level-sidebar button { min-width: max-content; min-height: 36px; padding: 0 .7rem; border: 1px solid rgba(16,26,27,.13); }.monster-level-sidebar button:hover, .monster-level-sidebar button.is-active { padding-left: .7rem; }.monster-level-sidebar button.is-active::before { content: none; }.monster-toolbar { grid-template-columns: 1fr 120px; position: static; }
  .monster-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }.monster-card { min-height: 224px; padding: .55rem; }.monster-preview { height: 102px; }.monster-preview img { max-width: 94px; max-height: 94px; }.monster-card-heading h3 { font-size: .96rem; }.monster-stats { gap: .12rem .4rem; }
  .map-hero { min-height: 470px; padding: 3rem 1rem; background-position: 58% center; }.map-hero h1 { font-size: clamp(3.2rem,15vw,5rem); }.route-method { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.5rem 1rem; }
  .hidden-route-section, .map-gallery-section { padding: 2.5rem 1rem 3rem; }.route-line { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); }.route-line small { grid-column: 1 / -1; }.map-gallery { grid-template-columns: 1fr; }.map-figure, .map-figure:nth-child(3n+2), .map-figure:nth-child(3n) { padding: .85rem 0; border-left: 0; border-right: 0; }
  .atlas-heading { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.3rem 1rem 1.7rem; }.atlas-heading h1 { font-size: 3.15rem; }.world-explorer, .region-explorer, .route-detail-section { padding: 2rem 1rem 2.7rem; }
  .atlas-section-title { grid-template-columns: 32px minmax(0,1fr); }.atlas-section-title > p, .atlas-section-title > button { grid-column: 2; justify-self: start; }.world-layout, .region-workspace, .route-detail-grid { grid-template-columns: 1fr; }
  .world-map-stage { overflow-x: auto; }.world-map-stage > img, .world-hotspots { width: 680px; max-width: none; }.region-index { display: flex; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.15); }.region-index button { min-width: 190px; padding: .7rem; border-right: 1px solid rgba(255,255,255,.12); }
  .world-hotspots span { font-size: .58rem; }.region-map-frame { padding: .8rem 0; border-right: 0; }.route-browser { padding: .8rem 0 0; }.route-list { max-height: none; }.route-path { grid-template-columns: 1fr; gap: .55rem; }.route-path span { justify-self: start; }.scene-preview { order: -1; }
  .item-hero { min-height: 470px; align-items: start; padding-top: 3rem; }.item-hero-copy { max-width: 82%; }.item-hero-cloud { width: 290px; height: 180px; right: -35px; top: auto; bottom: 18px; transform: none; }.item-hero-cloud span { width: 48px; height: 48px; }.item-hero-cloud img { max-width: 36px; max-height: 36px; }.item-hero-cloud span:nth-child(n+11) { display: none; }
  .item-main { padding: 2rem 1rem 3rem; }.item-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }.item-icon { padding: .35rem; }.item-icon img { max-width: 40px; max-height: 40px; }
  .item-catalog-heading { grid-template-columns: 1fr; gap: 1.3rem; padding: 2.4rem 1rem 1.8rem; }.item-catalog-heading h1 { font-size: 3.25rem; }.catalog-stats { overflow-x: auto; }.catalog-stats span { min-width: max-content; }
  .item-query-bar { grid-template-columns: 1fr 1fr; }.item-search { grid-column: 1 / -1; }.item-list { grid-template-columns: 1fr; }.item-record { grid-template-columns: 62px minmax(0,1fr); gap: .7rem; }.item-record-icon { width: 58px; height: 58px; }.item-record > b { grid-column: 2; justify-self: end; }.item-record-heading { display: grid; gap: .15rem; }.item-record-heading > span { justify-self: start; }.item-record-heading strong { font-size: 1.08rem; }.item-record-description { font-size: .68rem; }.item-dialog[open] { grid-template-columns: 1fr; }.item-dialog-visual { width: 100%; height: 150px; }.item-dialog img { max-width: 120px; max-height: 120px; }
}

@media (max-width: 900px) {
  .skill-layout, .career-layout { grid-template-columns: 1fr; gap: 1rem; }
  .career-side-nav { max-height: none; display: block; position: sticky; top: 60px; z-index: 8; overflow-x: auto; overflow-y: hidden; padding: .55rem 0; background: var(--paper); white-space: nowrap; }
  .career-side-nav > p, .career-side-nav strong { display: none; }
  .career-side-nav > div { display: flex; gap: .25rem; }
  .career-side-nav a { flex: 0 0 auto; padding: .35rem .55rem; border: 0; border-bottom: 2px solid transparent; }
  .career-side-nav a:hover, .career-side-nav a.active { border-left-color: transparent; border-bottom-color: var(--amber); }
  .skill-career-section, .video-item { scroll-margin-top: 122px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.site-disclaimer { max-width: 640px; line-height: 1.6; }
.site-disclaimer span { color: rgba(232,226,212,.78); }
.not-found-page { min-height: calc(100vh - 90px); display: grid; align-content: center; justify-items: start; padding: 4rem max(1rem, calc((100vw - 900px) / 2)); color: #eee9de; background: linear-gradient(120deg, rgba(4,13,15,.96), rgba(8,29,31,.82)), url("assets/hero-mountains.png") center/cover; }
.not-found-page h1 { max-width: 760px; margin: .4rem 0 1rem; font-family: var(--display); font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 400; line-height: 1; }
.not-found-page > p:not(.breadcrumb) { max-width: 600px; color: rgba(238,233,222,.72); line-height: 1.8; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.not-found-actions a { border: 1px solid rgba(239,195,114,.55); padding: .7rem 1rem; color: #efc372; }
.career-martial-section{--ink:#33271f;--cinnabar:#a53d2d;--paper:#f6f0e3;margin-top:30px;border:1px solid #d8c8ae;border-radius:4px;padding:clamp(18px,3vw,32px);overflow:hidden;background:radial-gradient(circle at 12% 12%,rgba(167,126,75,.12),transparent 24%),linear-gradient(135deg,rgba(255,255,255,.55),transparent 45%),repeating-linear-gradient(0deg,rgba(101,77,45,.025) 0 1px,transparent 1px 4px),var(--paper);box-shadow:0 18px 44px rgba(61,44,27,.1)}.career-martial-section>header{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:22px}.career-martial-section>header small{color:var(--cinnabar);letter-spacing:.12em}.career-martial-section>header h3{margin:5px 0 0;font-family:"STKaiti","KaiTi",serif;font-size:clamp(1.65rem,3vw,2.35rem);color:var(--ink)}.career-martial-section>header>span{max-width:420px;color:#756b5d;font-size:.88rem;text-align:right}.career-path-scroll{overflow-x:auto;padding:8px 3px 18px}.career-progression{display:flex;min-width:max-content;list-style:none;padding:0;margin:0}.career-progression li{position:relative;width:148px;padding-right:34px}.career-progression li:not(:last-child)::after{content:"";position:absolute;right:8px;top:50%;width:18px;border-top:1px solid #9e8566}.career-progression li:not(:last-child)::before{content:"›";position:absolute;right:4px;top:calc(50% - 13px);color:#8d6c49;font-size:22px}.career-path-node{width:114px;min-height:138px;border:1px solid #c9b493;border-radius:8px;padding:12px 8px;background:linear-gradient(160deg,#fffdf8,#e8dfcd);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 4px rgba(255,255,255,.5),0 3px 9px rgba(55,37,19,.1);transition:transform .2s,box-shadow .2s,border-color .2s}.career-path-node span,.career-path-node small{display:block;color:#817360;font-size:.72rem}.career-path-node strong{display:block;margin:22px 0 18px;font-family:"STKaiti","KaiTi",serif;font-size:1.12rem}.career-path-node.is-active{transform:translateY(-5px);border-color:var(--cinnabar);background:linear-gradient(155deg,#ba4c3b,#792b24);color:#fff;box-shadow:0 10px 22px rgba(117,38,31,.24)}.career-path-node.is-active span,.career-path-node.is-active small{color:#f5ddd4}.martial-stage-tabs{display:flex;gap:7px;overflow-x:auto;padding:3px 0 14px;border-bottom:1px solid #d7c7ad}.martial-stage-tab,.martial-filters button{white-space:nowrap;border:1px solid #cbb99e;border-radius:999px;padding:7px 13px;background:rgba(255,255,255,.58);color:#675743;cursor:pointer}.martial-stage-tab.is-active,.martial-filters button.is-active{border-color:#8f392d;background:#8f392d;color:#fff}.career-martial-workspace{padding-top:22px}.martial-stage-panel[hidden],.martial-skill-card[hidden]{display:none}.martial-stage-panel>header{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.martial-stage-panel>header small{color:#98724b}.martial-stage-panel h4{margin:2px 0 0;font-family:"STKaiti","KaiTi",serif;font-size:1.55rem}.martial-stage-panel>header b{font-size:.78rem;color:#8a7965}.martial-filters{display:flex;gap:6px;overflow-x:auto;margin-bottom:15px}.martial-stage-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(245px,.85fr);gap:18px;align-items:start}.martial-skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;max-height:430px;overflow-y:auto;padding:2px 7px 2px 2px}.martial-skill-card{display:flex;align-items:center;gap:10px;min-height:64px;border:1px solid #d7c8b1;border-radius:5px;padding:8px;text-align:left;background:rgba(255,255,255,.62);color:var(--ink);cursor:pointer;transition:border-color .18s,background .18s,transform .18s}.martial-skill-card:hover{transform:translateY(-1px);border-color:#aa7958}.martial-skill-card.is-active{border-color:#a53d2d;background:#fff8ec;box-shadow:inset 3px 0 #a53d2d}.martial-skill-card img,.martial-detail-title img{width:46px;height:46px;object-fit:cover;border:2px solid #6d5840;border-radius:5px;background:#2f271f;image-rendering:auto}.martial-skill-card span{min-width:0}.martial-skill-card strong,.martial-skill-card small{display:block}.martial-skill-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.93rem}.martial-skill-card small{margin-top:5px;color:#817260;font-size:.72rem}.martial-skill-detail{position:sticky;top:18px;min-height:210px;border:1px solid #c9b493;padding:20px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(232,219,194,.78));box-shadow:inset 0 0 30px rgba(126,84,39,.08)}.martial-detail-title{display:flex;align-items:center;gap:13px;padding-bottom:15px;border-bottom:1px solid #d8c6aa}.martial-detail-title img{width:58px;height:58px}.martial-detail-title small{color:#8e7254}.martial-detail-title h5{margin:4px 0 0;font-family:"STKaiti","KaiTi",serif;font-size:1.35rem}.martial-detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0 11px}.martial-detail-tags span{padding:4px 8px;background:#e8ddca;color:#745b3e;font-size:.72rem}.martial-skill-detail p{margin:0;color:#5b5145;line-height:1.75}.martial-source-note{margin-top:20px;border-top:1px dashed #c5b18f;padding-top:12px;color:#766a5c;font-size:.83rem}.martial-source-note summary{cursor:pointer;color:#81523c}.career-build-reference{margin-top:24px;border:1px solid #dfd4c4;background:#faf8f3}.career-build-reference>summary{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;color:#594838}.career-build-reference>summary span{font-weight:700}.career-build-reference>summary small{color:#8a7b69}.career-build-reference[open]>summary{border-bottom:1px solid #dfd4c4}.career-build-reference>.table-wrap,.career-build-reference>.career-skill-source-note{margin:14px}.career-skill-source-note{color:#7a6e61;font-size:.86rem}
@media(max-width:820px){.career-martial-section>header{display:block}.career-martial-section>header>span{display:block;text-align:left;margin-top:8px}.martial-stage-layout{grid-template-columns:1fr}.martial-skill-detail{position:static}.martial-skill-grid{max-height:390px;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.career-martial-section{padding:15px}.career-progression li{width:130px;padding-right:25px}.career-path-node{width:104px;min-height:126px}.martial-skill-grid{grid-template-columns:1fr;max-height:350px}.career-build-reference>summary small{display:none}}

.career-progressions{display:grid;gap:18px}.career-progression-branch{min-width:max-content}.career-progression-branch h4{margin:0 0 9px;color:#8f392d;font-family:"STKaiti","KaiTi",serif;font-size:1.08rem}.career-progression-branch+.career-progression-branch{border-top:1px dashed #c9b493;padding-top:16px}
.martial-stage-panel+.martial-stage-panel{margin-top:28px;border-top:1px solid #d7c7ad;padding-top:24px}
.career-view-tabs{display:inline-flex;margin:4px 0 22px;border:1px solid #cdbda4;border-radius:4px;padding:4px;background:#eee6d8}.career-view-tab{border:0;padding:10px 20px;background:transparent;color:#756552;font-weight:700;cursor:pointer}.career-view-tab.is-active{background:#8f392d;color:#fff;box-shadow:0 3px 9px rgba(93,40,29,.2)}.career-view-panel[hidden]{display:none}.career-view-panel[data-career-view="martial"] .career-martial-section{margin-top:0}.martial-icon-unresolved{display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;border:1px dashed #a78f70;border-radius:5px;background:#eee4d3;color:#866f52;font-size:.68rem}.martial-detail-title>.martial-icon-unresolved{flex-basis:58px;width:58px;height:58px}.career-build-reference>h3{margin:0 0 16px}
.career-path-scroll{overflow:visible;padding:6px 0 16px}.career-progression-branch{width:100%;min-width:0}.career-progression{display:grid;width:100%;min-width:0;grid-template-columns:repeat(var(--career-node-count),minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}.career-progression li{width:auto;padding:0;min-width:0}.career-progression li:not(:last-child)::after{right:calc(clamp(14px,1.8vw,26px) * -.78);width:clamp(9px,1.15vw,16px)}.career-progression li:not(:last-child)::before{right:calc(clamp(14px,1.8vw,26px) * -.72);z-index:1}.career-path-node{width:100%;min-width:0;min-height:116px;padding:10px 5px}.career-path-node strong{margin:14px 0 12px;font-size:clamp(.9rem,1.15vw,1.08rem)}.career-path-node span,.career-path-node small{font-size:clamp(.63rem,.76vw,.72rem)}
.martial-skill-grid{max-height:none;overflow-y:visible;padding-right:2px}
.martial-weapon-columns{display:grid;grid-template-columns:repeat(var(--weapon-column-count),minmax(0,1fr));gap:10px;align-items:start}.martial-weapon-column{min-width:0;border-top:2px solid #9a4938;background:rgba(255,255,255,.2)}.martial-weapon-column>header{display:flex;justify-content:space-between;align-items:center;padding:9px 7px;border-bottom:1px solid #d8c9b1}.martial-weapon-column>header h5{margin:0;font-family:"STKaiti","KaiTi",serif;font-size:1rem;color:#49372b}.martial-weapon-column>header small{color:#907a60;font-size:.68rem}.martial-weapon-list{display:grid;gap:7px;padding-top:8px}.martial-weapon-list .martial-skill-card{width:100%}
@media(max-width:700px){.career-progression{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:14px 20px}.career-progression li:not(:last-child)::after{right:-16px;width:12px}.career-progression li:not(:last-child)::before{right:-17px}.career-path-node{min-height:106px}.career-path-node strong{margin:10px 0}}
@media(max-width:960px){.martial-weapon-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.martial-weapon-columns{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.career-path-node,.martial-skill-card{transition:none}.career-path-node.is-active{transform:none}}