/* Keep every portrait at its original 3:4 ratio, including after viewport resizing. */
.portrait-deck{display:grid;grid-template-columns:54% 42%;gap:4%;height:auto;min-height:0;padding:10px 8px 17px;margin-bottom:12px;align-items:start}
.profession-card,.profession-card:nth-child(2){position:relative;left:auto!important;top:auto!important;width:100%!important;height:auto!important;display:block;align-self:start}
.profession-card:nth-child(2){margin-top:23px}
.profession-card .portrait,.profession-card:nth-child(2) .portrait{position:static;display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;object-position:center;padding:0}
.profession-card>.portrait{filter:none!important}
.card-label,.profession-card:nth-child(2) .card-label{position:relative;left:auto;bottom:auto;height:70px;min-height:70px;padding:7px 10px;gap:8px;font-size:29px}
.card-label img,.profession-card:nth-child(2) .card-label img{width:43px;height:43px}
.mode-toggle{max-width:none}.mode-toggle button{font-size:14px}
.paper-build-title>select{font-size:clamp(21px,2.5vw,36px);text-overflow:ellipsis}
.build-badges .badge{font-size:10px}.catalogue-count{font-size:11px;color:#856f82}
.skill-strip .item-slot{max-width:none;flex:1;min-width:60px}.skill-strip .item-slot label{font-size:10px;line-height:1.5}
.trait-choice span{font-size:11px}.trait-choice.selected:after{content:'已选';font:8px/1.5 var(--body);padding:1px 3px;background:#7650c7;color:white;border-radius:3px;margin-left:auto;white-space:nowrap}
.source-line small{font-size:9px}.detail-aside .benchmark-value{font-size:21px;color:var(--violet);font-weight:bold}
.rank-main .rank-source{display:block;margin-top:5px}.benchmark-notice{margin:12px 0}
[data-profession=Guardian]{--profession-filter:brightness(0) saturate(100%) invert(44%) sepia(89%) saturate(984%) hue-rotate(161deg)}
[data-profession=Warrior]{--profession-filter:brightness(0) saturate(100%) invert(47%) sepia(54%) saturate(1343%) hue-rotate(350deg)}
[data-profession=Elementalist]{--profession-filter:brightness(0) saturate(100%) invert(31%) sepia(60%) saturate(2791%) hue-rotate(340deg)}
[data-profession=Mesmer],[data-profession=Revenant]{--profession-filter:brightness(0) saturate(100%) invert(20%) sepia(68%) saturate(2517%) hue-rotate(256deg)}
[data-profession=Necromancer],[data-profession=Ranger]{--profession-filter:brightness(0) saturate(100%) invert(34%) sepia(39%) saturate(840%) hue-rotate(43deg)}
[data-profession=Engineer]{--profession-filter:brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(684%) hue-rotate(1deg)}
[data-profession=Thief]{--profession-filter:brightness(0) saturate(100%) invert(18%) sepia(39%) saturate(1246%) hue-rotate(334deg)}
.profession-card .card-label img,.build-paper .paper-heading>img{filter:var(--profession-filter)}
.tooltip-head>div{flex:1;min-width:0}.tooltip-close{width:25px;height:25px;flex-shrink:0;align-self:flex-start;padding:4px;border:1px solid #d8c7ad;border-radius:5px}.tooltip-close img{width:16px;height:16px}
@media(min-width:1281px){.portrait-deck{padding-top:9px}.album-subtitle{margin-bottom:19px}.pinned-heading{margin-bottom:9px}}
@media(max-width:1280px){.card-label,.profession-card:nth-child(2) .card-label{font-size:24px;height:63px;min-height:63px;gap:5px;padding:6px}.card-label img,.profession-card:nth-child(2) .card-label img{width:35px;height:35px}}
@media(max-width:980px){.portrait-deck{max-width:510px;margin-left:auto;margin-right:auto}.mode-toggle button{font-size:13px}.paper-build-title>select{font-size:30px}}
@media(max-width:520px){.card-label,.profession-card:nth-child(2) .card-label{height:55px;min-height:55px;font-size:18px;padding:5px;gap:4px}.card-label img,.profession-card:nth-child(2) .card-label img{width:29px;height:29px}.portrait-deck{padding-left:3px;padding-right:3px;gap:4%;padding-bottom:9px}.profession-card:nth-child(2){margin-top:17px}.mode-toggle button{font-size:11px;padding:0 4px}.paper-build-title>select{font-size:24px}.trait-choice.selected:after{font-size:7px}.trait-choice span{display:none}.trait-choice.selected:after{position:absolute;right:0;bottom:0}.trait-choice{position:relative}.rank-source{font-size:8px}.skill-strip .item-slot{min-width:43px}.skill-strip .item-slot img{width:39px;height:39px}}
.profession-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.profession-heading h2{display:flex;align-items:center;gap:7px;font:900 25px/1.4 var(--display);margin:0;padding:3px 9px;background:#fbe499;transform:rotate(-2deg)}
.profession-heading h2 img{width:20px;height:20px}.profession-heading>span{font-size:12px;color:#917b8d}
.portrait-deck.single-profession-deck{grid-template-columns:1fr;justify-items:center;gap:0;padding:8px 12px 17px;max-width:none}
.single-profession-deck .profession-card{max-width:300px;margin:0;transform:rotate(-1.5deg);cursor:default}
.single-profession-deck .profession-card:hover{transform:rotate(-1.5deg)}
.other-professions.profession-selector{grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
.freshness-note{margin:0 0 10px;padding:7px 10px;border-left:3px solid #9676d7;background:#f0e9fc80;color:#6f5780;font-size:11px;line-height:1.6}.freshness-note.unverified{border-color:#cf9b64;background:#fff0da80;color:#8b6952}
.build-guide h3{font:800 22px/1.4 var(--display);margin:0 0 10px}.build-guide p{font-size:13px;line-height:1.8}.guide-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.guide-facts div{padding:10px;background:#f7f0e6;border:1px solid #eadbcc;border-radius:8px}.guide-facts dt{font-size:10px;color:#917b8d}.guide-facts dd{margin:4px 0 0;font-size:12px;line-height:1.6}.guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.guide-columns h4{font-size:13px;color:#60448a;margin:8px 0}.guide-columns ul{padding-left:17px;font-size:12px;line-height:1.9}.guide-columns section+section h4{color:#a66b44}.build-guide .source-note{font-size:10px;margin-top:20px}.detail-layout .build-guide{margin-bottom:28px}.filters{flex-wrap:wrap}
@media(max-width:520px){.guide-facts{gap:7px}.guide-columns{gap:10px}.freshness-note{font-size:10px}}
.profession-selector .profession-chip>span{font-size:11px}.profession-selector .profession-chip>img{width:32px;height:32px;filter:var(--profession-filter)}
@media(max-width:1280px){.single-profession-deck .profession-card{max-width:260px}.profession-heading h2{font-size:21px}.profession-heading>span{font-size:10px}.profession-selector .profession-chip>span{font-size:9px}.profession-selector .profession-chip>img{width:27px;height:27px}}
@media(max-width:980px){.single-profession-deck .profession-card{max-width:280px}.profession-selector .profession-chip>span{font-size:11px}}
@media(max-width:520px){.single-profession-deck .profession-card{max-width:230px}.profession-heading h2{font-size:18px}.profession-heading>span{font-size:9px}.other-professions.profession-selector{grid-template-columns:repeat(5,minmax(0,1fr))}.profession-selector .profession-chip>span{font-size:10px}}