@font-face {
font-family: "Chakra Petch";
src: url("fonts/chakra-petch-600.woff2") format("woff2");
font-weight: 600;
font-display: swap;
}

@font-face {
font-family: "Chakra Petch";
src: url("fonts/chakra-petch-700.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}

:root {

--ink: #0b0d14;
--ink-lift: #0e1119;
--panel-a: #161b28;
--panel-b: #12151f;
--bone-hi: #f4f1e8;
--bone: #e6e2d6;
--bone-dim: #9aa0ac;
--bone-faint: #5b6472;
--hair: #2a3040;


--g-1: #f9837c;
--g-2: #ff9669;
--g-3: #ffa956;
--g-4: #ffbb48;
--g-5: #efcb47;
--g-6: #d5d855;
--g-7: #b2e16e;
--g-8: #85e589;
--hair-lit: #3c4457;



--font-disp: "Chakra Petch", "PingFang SC", "Noto Sans SC", sans-serif;
--font-body: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "PingFang SC",
"Noto Sans SC", sans-serif;
--font-cn: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;



--font-read: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
"PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;








--c-arc: #5fd8e0;
--c-stasis: #7fb4ff;
--c-void: #c08cff;
--c-strand: #7fdc86;
--c-solar: #ffb35c;
--c-kinetic: #eef7f2;
--c-prism: #f58fc8;



--c-artifact: #20c4b0;



--c-legend: #cf4a9c;
--c-exotic: #fcb70a;
--c-orb: #dbc46a;
--c-stack: #dbc46a;
--c-charge: #2f9fd6;

--c-ammo: #cc44ff;


--c-ammo-special: #3ff24f;

--c-health: #41b349;


--c-enemy: #d94452;
--c-term: #d6c39a;
--c-perk: #f9e9cd;

--c-buff: #2f9fd6;
--c-bar-red: #ff8e86;
--c-bar-orange: #ffb35c;
--c-bar-yellow: #f2ce5b;


--c-debuff: #a2848c;
--c-unsure: #a2848c;
--c-pvp: #ee2746;



--c-note: #eea6b7;



--el-arc: var(--c-arc);
--deb-arc: var(--c-arc);
--el-stasis: var(--c-stasis);
--deb-stasis: var(--c-stasis);
--el-void: var(--c-void);
--deb-void: var(--c-void);
--el-strand: var(--c-strand);
--deb-strand: var(--c-strand);
--el-solar: var(--c-solar);
--deb-solar: var(--c-solar);
--el-kinetic: var(--c-kinetic);
--el-prismatic: var(--c-prism);
--ammo-heavy: var(--c-ammo);
--ammo-special: var(--c-ammo-special);
--enemy: var(--c-enemy);
--pickup: var(--c-charge);
--buff: var(--c-buff);
--orb: var(--c-orb);
--stack: var(--c-stack);
--armor-charge: var(--c-charge);
--exotic: var(--c-exotic);
--health: var(--c-health);
--debuff: var(--c-debuff);
--note: var(--c-note);
--pvp: var(--c-pvp);
--kind: var(--c-legend);
--unsure: var(--c-unsure);



--stick: 45px;




--tint-1: #ffffff04;
--tint-2: #ffffff05;
--tint-3: #ffffff09;
--head-fill: #ffffff06;
--row-hover: #ffffff0b;
--field-fill: #ffffff0d;








--au-aegis: #3d8bff;
--au-lgpig: #ea6c96;
--halo-both: conic-gradient(var(--c-arc), var(--c-solar), var(--c-void), var(--c-stasis),
var(--c-strand), var(--c-prism), var(--c-arc));

--accent: var(--c-arc);



--accent-warm: var(--c-solar);



--grid: #ffffff06;
--atmo: linear-gradient(180deg, #12172a, #0b0d1400);




--wrap: 1060px;
--min: 0px;
}





.b-arc { --accent: var(--c-arc); }
.b-solar { --accent: var(--c-solar); }
.b-void { --accent: var(--c-void); }
.b-stasis { --accent: var(--c-stasis); }
.b-strand { --accent: var(--c-strand); }
.b-prismatic { --accent: var(--c-prism); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }




html {
scrollbar-width: thin;
scrollbar-color: var(--hair-lit) var(--ink-lift);
}

body {
min-height: 100vh;








width: fit-content;
min-width: max(var(--min), 100%);





--vw: max(1vw, calc(var(--min) / 100));
margin: 0;



position: relative;

display: flex;
flex-direction: column;
color: var(--bone);
font: 400 15px/1.85 var(--font-body);
font-variant-numeric: tabular-nums;

















background:
repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 88px),
repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 88px),
var(--atmo),
var(--ink);
background-repeat: repeat, repeat, repeat-x, repeat;
background-size: auto, auto, 100% 640px, auto;
}



body > * { width: 100%; }

a { color: var(--bone); }

:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}









.off-screen {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}



[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
}


.site-head {
position: sticky;
top: 0;
z-index: 20;
background: var(--ink-lift);
border-bottom: 1px solid var(--hair);
}



.site-head::after {
content: "";
position: absolute;
inset: auto 0 -2px;
height: 1px;
background: linear-gradient(90deg, var(--hair-lit), transparent 72%);
}

.site-nav {
display: flex;
align-items: center;
gap: 14px;
max-width: 1500px;
margin: 0 auto;
padding: 12px 22px;
font-family: var(--font-disp);
font-size: 12px;
font-weight: 600;
}




.mark {
--sig: 6px;
display: flex;
flex: none;
gap: calc(var(--sig) / 2);
}

.mark i {
width: var(--sig);
height: var(--sig);
background: currentcolor;
border: 1px solid currentcolor;
transform: rotate(45deg);
}


.mark i:last-child { background: none; }

.site-nav .mark { color: var(--bone-dim); margin-right: 2px; }

.site-nav a {
color: var(--bone);
letter-spacing: .12em;
text-decoration: none;
}

.site-nav a:hover { color: var(--bone-hi); }

.site-nav .home {
letter-spacing: .18em;
text-transform: uppercase;
}



.site-nav .step { color: var(--bone-faint); }

.site-nav .sep { color: var(--hair-lit); }

.site-nav [aria-current="page"] {
color: var(--bone-dim);
font-weight: 600;
letter-spacing: .12em;
}










.toolbar:empty { min-height: 46.5px; }
.toolbar[data-cols]:empty, .toolbar[data-chart]:empty { min-height: 40px; }
.toolbar[data-chip-break]:empty { min-height: 91.3px; }
.toolbar[data-clock]:empty { display: none; }

.toolbar {
display: flex;
align-items: center;
gap: 18px;
max-width: 1500px;
margin: 0 auto;
padding: 0 22px 11px;
}




.tool-search {
flex: none;
width: 236px;
padding: 7px 11px;
color: var(--bone-hi);
font: 400 13px/1.5 var(--font-body);
background: #ffffff08;
border: 1px solid var(--hair-lit);
border-radius: 0;
}

.tool-search::placeholder { color: var(--bone-faint); }


.tool-search:focus {
background: var(--field-fill);
border-color: var(--accent);
}





.toolbar[data-miss] .tool-search,
.hero-search[data-miss] .tool-search { border-color: var(--c-health); }

.toolbar[data-miss] .tool-count,
.hero-search[data-miss] .tool-count { color: var(--c-health); }

.tool-count {
flex: none;
min-width: 7em;
margin: 0;
color: var(--bone-faint);
font-family: var(--font-disp);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
}



.tool-chips {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 5px;
margin-left: auto;
}








.toolbar:not(:has(.tool-search)) .tool-chips {
justify-content: flex-start;
margin-left: 0;
}




.tool-chips .chip-break {
flex-basis: 100%;
height: 0;
}















.chip {
position: relative;
padding: 6px 12px;
color: var(--bone-dim);
font-family: var(--font-cn);
font-size: 12.5px;
text-decoration: none;


border: 0;
transition: color .15s ease;
}




.toggle,
.op {





position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
color: var(--bone-dim);
font-family: var(--font-disp);
font-size: 12px;
letter-spacing: .08em;
text-decoration: none;
background: var(--tint-2);
border: 1px solid var(--hair);
cursor: pointer;




user-select: none;
transition: color .15s ease, border-color .15s ease;
}








:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle {
padding: 6px 12px;
font-family: var(--font-cn);
font-size: 12.5px;
letter-spacing: normal;
background: none;
border: 0;
}



.chip::before,
.chip::after,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle::before,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border: 1px solid currentcolor;
opacity: 0;
transition: opacity .15s ease;
}

.chip::before,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }

.chip::after,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.chip:hover { color: var(--bone-hi); }

.chip[aria-current="true"] { color: var(--accent); }

.chip:hover::before,
.chip:hover::after,
.chip[aria-current="true"]::before,
.chip[aria-current="true"]::after,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle:hover::before,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle:hover::after,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle[aria-pressed="true"]::before,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle[aria-pressed="true"]::after,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle[aria-current="true"]::before,
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle[aria-current="true"]::after { opacity: 1; }

.toggle:hover,
.op:hover { color: var(--bone-hi); border-color: var(--accent); }

.toggle[aria-pressed="true"],
.toggle[aria-current="true"],
.op[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }


:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle:hover { border-color: transparent; }

:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle[aria-pressed="true"],
:is(.tool-chips, .facet-bar, .rota-btns, .tuck-row) .toggle[aria-current="true"] { border-color: transparent; }



.toggle[disabled],
.op[disabled] { opacity: .4; cursor: default; }

.toggle[disabled]:hover,
.op[disabled]:hover { color: var(--bone-dim); border-color: var(--hair); }


.op-sep {



flex: 1;
align-self: stretch;
min-width: 16px;
}

.op-sep::before {
content: "";
display: block;
width: 1px;
height: 100%;
margin: 0 auto;
background: var(--hair-lit);
}





main,
.page-head {
max-width: var(--wrap);
margin: 0 auto;
}

main {
flex: 1 0 auto;
padding: 0 22px clamp(48px, calc(6 * var(--vw)), 84px);
}



.page-head { padding: clamp(96px, calc(8.4 * var(--vw)), 128px) 22px 34px; }



.head-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--hair-lit);
}

.head-row h1 { padding-bottom: 0; border-bottom: 0; }




.page-head h1 {
margin: 0;
padding-bottom: 12px;
color: var(--bone-hi);
font-family: var(--font-cn);
font-size: clamp(36px, calc(4 * var(--vw)), 56px);
font-weight: 600;
line-height: 1.15;
letter-spacing: .06em;
border-bottom: 1px solid var(--hair-lit);
}


.sect-label {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
color: var(--bone-dim);
font-family: var(--font-disp);
font-size: 11px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
}


.sect-label::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-right: 12px;
vertical-align: 1px;
background: var(--accent);
transform: rotate(45deg);
}

.sect-label::after {
content: "";
flex: 1;
height: 1px;
background: var(--hair);
}








.sect-label .chip {
order: 1;
flex: none;
margin-right: -12px;
letter-spacing: .06em;
}


.rhombi {
display: flex;
flex: none;
gap: 4px;
}

.rhombi i {
width: 8px;
height: 8px;
border: 1px solid currentcolor;
transform: rotate(45deg);
}

.rhombi i.on { background: currentcolor; }







:is(.mod-desc, .gen td, .bonus-body) .cond {
position: relative;
padding-left: 14px;
color: var(--bone-dim);
font-size: 13px;
}

:is(.mod-desc, .gen td, .bonus-body) .cond::before {
content: "";
position: absolute;
left: 1px;
top: .55em;
width: 5px;
height: 5px;
border: 1px solid var(--bone-faint);
transform: rotate(45deg);
}



.el-arc, .deb-arc, .el-stasis, .deb-stasis, .enemy, .el-void, .ammo-heavy,
.el-strand, .deb-strand, .ammo-special, .el-solar, .deb-solar, .el-kinetic, .el-prismatic,
.deb-void, .pickup, .orb, .stack, .armor-charge, .health,
.exotic, .buff, .debuff,
.bar-red, .bar-orange, .bar-yellow {
font-weight: 600;
}

.el-arc { color: var(--el-arc); }
.deb-arc { color: var(--deb-arc); }
.el-stasis { color: var(--el-stasis); }
.deb-stasis { color: var(--deb-stasis); }
.enemy { color: var(--enemy); }
.el-void { color: var(--el-void); }
.ammo-heavy { color: var(--ammo-heavy); }
.ammo-special { color: var(--ammo-special); }
.el-strand { color: var(--el-strand); }
.deb-strand { color: var(--deb-strand); }
.el-solar { color: var(--el-solar); }
.deb-solar { color: var(--deb-solar); }
.el-kinetic { color: var(--el-kinetic); }
.el-prismatic { color: var(--el-prismatic); }
.deb-void { color: var(--deb-void); }
.pickup { color: var(--pickup); }
.orb { color: var(--orb); }
.stack { color: var(--stack); }
.armor-charge { color: var(--armor-charge); }
.health { color: var(--health); }
.exotic { color: var(--exotic); }
.buff { color: var(--buff); }
.debuff { color: var(--debuff); }



.art-perk { color: var(--c-artifact); }





.perk { color: var(--c-perk); }



.bar-red { color: var(--c-bar-red); }
.bar-orange { color: var(--c-bar-orange); }
.bar-yellow { color: var(--c-bar-yellow); }


.pvp { color: var(--pvp); }






.note { color: var(--note); font-weight: 400; }



.kind { color: var(--kind); font-weight: 400; }



.gen tbody td.na {
color: var(--bone-faint);
font-family: var(--font-cn);
font-size: 12px;
}

.unsure {
color: var(--unsure);
font-weight: 400;
border-bottom: 1px dotted color-mix(in srgb, var(--unsure) 55%, transparent);
}














.block,
.cat,
.artifact { scroll-margin-top: calc(var(--stick) + 16px); }

.block { margin-bottom: clamp(40px, calc(4.6 * var(--vw)), 64px); }

.block:last-child { margin-bottom: 0; }





.block > .sect-label {
margin-bottom: 20px;
color: var(--bone);
font-size: 12px;
letter-spacing: .14em;
}

.block p {
margin: 0 0 1.05em;
line-height: 2;
}

.block p:last-child { margin-bottom: 0; }


.block em,
.block strong {
color: var(--bone-hi);
font-style: normal;
font-weight: 600;
}


.block a {
color: var(--bone-hi);
text-decoration-color: var(--bone-faint);
text-underline-offset: 3px;
}

.block a:hover { text-decoration-color: var(--bone-hi); }






.gen {
width: 100%;
margin: 0 auto;
border: 1px solid var(--hair);
border-collapse: collapse;
font-size: 13px;
line-height: 1.6;
}


.gen + .gen { margin-top: 26px; }

.gen th,
.gen td {
padding: 9px 16px;
border-top: 1px solid var(--hair);
border-left: 1px solid var(--hair);
vertical-align: middle;
}




.gen thead { color: var(--bone-dim); }

.gen thead th {
font-family: var(--font-cn);
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-align: center;
background: var(--head-fill);
border-top: 0;



word-break: keep-all;
}




.gen thead th:first-child,
.gen tbody th[scope="row"] { border-left: 0; }




.gen tbody { color: var(--bone-dim); }


.gen tbody + tbody tr:first-child > th,
.gen tbody + tbody tr:first-child > td { border-top: 1px solid var(--hair-lit); }







.gen tr.lane > th {
font-family: var(--font-cn);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-align: center;
background: var(--head-fill);
}




.gen tr.lane > th:not([class]) { color: var(--bone-hi); }











.gen tbody tr:where([data-band]):has(> th) > th,
.gen tbody tr:where([data-band]):has(> th) > td { border-top: 1px solid var(--bone-faint); }


.gen tbody tr:first-child > th,
.gen tbody tr:first-child > td { border-top: 0; }




.gen tbody tr[data-band="1"] > th,
.gen tbody tr[data-band="1"] > td { background: var(--tint-2); }






.gen tbody th[scope="row"] {
background: var(--tint-1);
text-align: center;
}

.gen tbody tr[data-band="1"] > th[scope="row"] { background: var(--tint-3); }






.gen td img,
.gen th img { border-radius: 6px; }




.gen tbody td:empty::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 14px;
height: 1px;
background: var(--hair-lit);
}



.gen tbody td[data-tier] .g + .g { margin-left: .24em; }


.gen .note { font-size: 12px; }

















.gen tbody td[data-tier="1"], .gen tbody td.g-f { color: var(--g-1); }
.gen tbody td[data-tier="2"], .gen tbody td.g-e { color: var(--g-2); }
.gen tbody td[data-tier="3"], .gen tbody td.g-d { color: var(--g-3); }
.gen tbody td[data-tier="4"] { color: var(--g-4); }
.gen tbody td[data-tier="5"], .gen tbody td.g-c { color: var(--g-5); }
.gen tbody td[data-tier="6"], .gen tbody td.g-b { color: var(--g-6); }
.gen tbody td[data-tier="7"], .gen tbody td.g-a { color: var(--g-7); }
.gen tbody td[data-tier="8"], .gen tbody td.g-s { color: var(--g-8); }
























body:has(.hero) {
--grid: #ffffff0d;


--min: 1188px;

background:
linear-gradient(90deg, #ffffff1c 0 1px, transparent 1px),
repeating-linear-gradient(0deg, #ffffff1c 0 1px, transparent 1px 352px),
linear-gradient(90deg, var(--grid) 0 1px, transparent 1px),
repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 88px),
var(--atmo),
var(--ink);
background-position: calc(50% + 176px) 0, 0 0, calc(50% + 44px) 0, 0 0, 0 0, 0 0;
background-repeat: repeat, repeat, repeat, repeat, repeat-x, repeat;
background-size: 352px 100%, auto, 88px 100%, auto, 100% 640px, auto;
}











.starfield {
position: fixed;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
pointer-events: none;
}



.starfield[data-page] {
opacity: 0;
transition: opacity 1.2s ease;
}

.starfield[data-page].on { opacity: 1; }





body:has(.hero) .group-label::after {
height: 11px;
transform-origin: left;
background:
linear-gradient(var(--hair), var(--hair)) 0 5px / 100% 1px no-repeat,
linear-gradient(90deg, var(--hair-lit) 0 1px, transparent 1px) var(--rx, 0) 1px / 8px 4px repeat-x,
linear-gradient(90deg, var(--bone-faint) 0 1px, transparent 1px) var(--rx, 0) 0 / 88px 6px repeat-x;
}


body:has(.hero) .entries > li { position: relative; }

body:has(.hero) .entries > li::before,
body:has(.hero) .entries > li::after {
content: "";
position: absolute;
z-index: 1;
width: 11px;
height: 11px;
opacity: .5;
pointer-events: none;
background:
linear-gradient(var(--bone-faint), var(--bone-faint)) 50% 50% / 11px 1px no-repeat,
linear-gradient(var(--bone-faint), var(--bone-faint)) 50% 50% / 1px 11px no-repeat;
}

body:has(.hero) .entries > li::before { left: -6px; top: -6px; }

body:has(.hero) .entries > li::after { right: -6px; bottom: -6px; }



.wordmark.sheen {
color: transparent;
-webkit-text-fill-color: transparent;
background: linear-gradient(104deg, var(--bone-hi) 0 43%, #fff 50%, var(--bone-hi) 57% 100%) 100% 0 / 260% 100% no-repeat;
-webkit-background-clip: text;
background-clip: text;
animation: sheen 2.4s cubic-bezier(.3, .1, .2, 1) .5s 1 both;
}

@keyframes sheen { to { background-position: 0 0; } }









.hero {
position: relative;
max-width: 1500px;
margin: 0 auto;
padding: 88px 22px 24px;
}



































.hero-mark {
position: absolute;
top: 50%;
right: 130px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;


font-size: 16px;
width: 14em;
height: 0;
margin: 0;
}














.hero-mark {
--morph: 2200ms;
--half: calc(var(--morph) * .5);
--fade: calc(var(--morph) * .375);
--fade-lag: calc(var(--morph) * .625);
}

.hero-mark.titan { --morph: 2200ms; }

.hero-mark.hunter { --morph: 2200ms; }



.hero-mark.default {
--morph: 1800ms;
--fade: calc(var(--morph) * .18);
--fade-lag: calc(var(--morph) * .82);
}




.hero-mark.warlock {
--morph: 1800ms;
--fade: calc(var(--morph) * .85);
--fade-lag: 0s;
}

.hero-mark i,
.hero-mark .rays { position: absolute; }










.hero-mark.warlock .shapes,
.hero-mark.hunter .shapes { z-index: 1; }






.hero-mark .circle {
border: 1px solid var(--hair-lit);
border-radius: 50%;
filter: blur(.2px);
}

.hero-mark .shapes {
position: absolute;
display: grid;
place-items: center;
width: 8em;
height: 8em;
overflow: hidden;
transition: height var(--morph) ease-in-out;
}






.hero-mark::after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 24em;
height: 24em;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, var(--ink) 42%, #0b0d1400);
}





.hero-mark::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7.8em;
height: 7.8em;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(var(--hair-lit) 0 1.2deg, transparent 1.2deg 7.5deg);
mask: radial-gradient(closest-side, transparent 86%, #000 90%, #000 94%, transparent 98%);
opacity: .16;
}








.hero-mark .shape {
border-left: 2.85em solid transparent;
border-right: 2.85em solid transparent;
border-bottom: 4.9em solid color-mix(in srgb, var(--bone) 78%, var(--ink));
transition: transform var(--morph) ease-in-out, clip-path var(--morph) ease-in-out,
border-bottom-color var(--fade) ease-in var(--fade-lag);
}







.hero-mark .line {
position: absolute;
margin-left: -.5px;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, var(--hair-lit) 20%,
var(--hair-lit) 80%, transparent);
filter: blur(.2px);
}

.hero-mark .line.l1 { left: 0; }

.hero-mark .line.l2 { left: 33%; }

.hero-mark .line.l3 { left: 67%; }

.hero-mark .line.l4 { left: 100%; }

.hero-mark .circle,
.hero-mark .rays,
.hero-mark .line { transition: all var(--morph) ease-in-out; }






.hero-mark.default .c1 { width: 10em; height: 10em; }

.hero-mark.default .c2 { width: 9.55em; height: 9.55em; }

.hero-mark.default .c3 { width: 9.2em; height: 9.2em; }

.hero-mark.default .c4 { width: 8.9em; height: 8.9em; }









.hero-mark.default .shape {
border-bottom-color: transparent;
transform: rotate(180deg) scale(.35) translate(0, 0);
}





.hero-mark.default .s1 { transform: rotate(45deg) scale(.35) translate(0, 0); }

.hero-mark.default .s2 { transform: rotate(180deg) scale(.35) translate(0, 0); }

.hero-mark.default .s3 { transform: rotate(315deg) scale(.35) translate(0, 0); }

.hero-mark.default .g1 { width: 6em; height: 15em; }

.hero-mark.default .g2 { width: 7.75em; height: 15em; transform: rotate(-60deg); }

.hero-mark.default .g3 { width: 7.75em; height: 15em; transform: rotate(60deg); }


.hero-mark.warlock .c1 { width: 6.25em; height: 6.25em; }

.hero-mark.warlock .c2 { width: 4em; height: 4em; }

.hero-mark.warlock .c3 {
width: 12.5em;
height: 12.5em;
transition: all var(--half) ease-in-out var(--half);
}

.hero-mark.warlock .c4 {
width: 11.5em;
height: 11.5em;
transition: all var(--half) ease-in-out var(--half);
}
















.hero-mark.warlock .shape {
transform-origin: 50% 50%;
}





.hero-mark.warlock .s2,
.hero-mark.warlock .s3 { filter: drop-shadow(-.384em 0 0 var(--ink)); }

.hero-mark.warlock .s1,
.hero-mark.warlock .s4,
.hero-mark.warlock .s5 { filter: none; }

.hero-mark.warlock .s1 { transform: rotate(0) scale(.885, .877) translate(-1.42em, .428em); }

.hero-mark.warlock .s2 { transform: rotate(360deg) scale(.885, .877) translate(0, .428em); }

.hero-mark.warlock .s3 { transform: rotate(360deg) scale(.885, .877) translate(1.42em, .428em); }


.hero-mark.warlock .s4 { transform: rotate(0) scale(.885, .877) translate(-1.036em, .428em); }

.hero-mark.warlock .s5 { transform: rotate(360deg) scale(.885, .877) translate(.384em, .428em); }

.hero-mark.warlock .s4,
.hero-mark.warlock .s5 {
border-bottom-color: var(--ink);
clip-path: polygon(50% 0, 100% 100%, calc(100% - .384em) 100%, calc(50% - .384em) 0);
}

.hero-mark.warlock .s6 { border-bottom-color: transparent; }

.hero-mark.warlock .g1 { width: 6em; height: 15em; transform: rotate(-90deg); }

.hero-mark.warlock .g1 .l2,
.hero-mark.warlock .g1 .l3 { opacity: 0; }

.hero-mark.warlock .g2 { width: 4em; height: 15em; transform: rotate(-150deg); }

.hero-mark.warlock .g2 .l1 { left: 50%; }

.hero-mark.warlock .g2 .l2 { left: 74%; }

.hero-mark.warlock .g2 .l3 { left: 77%; }

.hero-mark.warlock .g2 .l4 { left: 100%; }

.hero-mark.warlock .g3 { width: 4em; height: 15em; transform: rotate(150deg); }

.hero-mark.warlock .g3 .l1 { left: 0; }

.hero-mark.warlock .g3 .l2 { left: 24%; }

.hero-mark.warlock .g3 .l3 { left: 27%; }

.hero-mark.warlock .g3 .l4 { left: 50%; }


.hero-mark.titan .c1 { width: 10.5em; height: 10.5em; }

.hero-mark.titan .c2 { width: 10em; height: 10em; }

.hero-mark.titan .c3 { width: 12em; height: 12em; transition: all var(--half) ease-in-out var(--half); }

.hero-mark.titan .c4 { width: 11em; height: 11em; transition: all var(--half) ease-in-out var(--half); }




.hero-mark.titan .s1 { transform: rotate(-90deg) scale(.535) translate(-3.1em, -2.4em); }

.hero-mark.titan .s2 { transform: rotate(270deg) scale(.535) translate(3.1em, -2.4em); }

.hero-mark.titan .s3 { transform: rotate(270deg) scale(.485) translate(0, 3em); }

.hero-mark.titan .s4 { transform: rotate(90deg) scale(.485) translate(0, 3em); }

.hero-mark.titan .s5 { transform: rotate(450deg) scale(.535) translate(-3.1em, -2.4em); }

.hero-mark.titan .s6 { transform: rotate(450deg) scale(.535) translate(3.1em, -2.4em); }





.hero-mark.titan .s4,
.hero-mark.titan .s5,
.hero-mark.titan .s6 { transition: transform var(--morph) ease-in-out; }

.hero-mark.titan .g1 { width: 5.25em; height: 15em; transform: rotate(-180deg); }

.hero-mark.titan .g1 .l2,
.hero-mark.titan .g1 .l3 { opacity: 0; }

.hero-mark.titan .g2 { width: 5.5em; height: 15em; transform: rotate(-240deg); }

.hero-mark.titan .g3 { width: 5.5em; height: 15em; transform: rotate(240deg); }

.hero-mark.titan .g2 .l1,
.hero-mark.titan .g3 .l1 { left: 0; }

.hero-mark.titan .g2 .l2,
.hero-mark.titan .g3 .l2 { left: 48%; }

.hero-mark.titan .g2 .l3,
.hero-mark.titan .g3 .l3 { left: 52%; }

.hero-mark.titan .g2 .l4,
.hero-mark.titan .g3 .l4 { left: 100%; }


.hero-mark.hunter .c1 { width: 5.5em; height: 5.5em; }

.hero-mark.hunter .c2 { width: 4em; height: 4em; }

.hero-mark.hunter .c3 { width: 9em; height: 9em; }

.hero-mark.hunter .c4 { width: 8em; height: 8em; }

.hero-mark.hunter .shapes { height: 6.4em; }

.hero-mark.hunter .shape {
transition: all var(--morph) ease-in-out,
border-bottom-color var(--fade) ease-in var(--fade-lag);
}

.hero-mark.hunter .s1 { transform: rotate(0deg) scale(.83) translate(0, 1.362em); }

.hero-mark.hunter .s2 { transform: rotate(360deg) scale(.83) translate(0, -3.738em); }

.hero-mark.hunter .s3 { transform: rotate(360deg) scale(.83) translate(0, -1.188em); }























.hero-mark.titan .s1,
.hero-mark.titan .s2,
.hero-mark.titan .s3,
.hero-mark.default .s1,
.hero-mark.default .s2,
.hero-mark.default .s3 {
clip-path: polygon(50% 0, 50% 0, 100% 100%, 100% 100%, 50% 100%, 0 100%, 0 100%);
}

.hero-mark.hunter .s1,
.hero-mark.hunter .s2,
.hero-mark.hunter .s3 {
clip-path: polygon(25.75% 48.5%, 74.25% 48.5%, 100% 100%, 75.4% 100%,
50% 49.2%, 24.6% 100%, 0 100%);
}

.hero-mark.hunter .s4,
.hero-mark.hunter .s5,
.hero-mark.hunter .s6 { border-bottom-color: transparent; }

.hero-mark.hunter .s4 { transform: rotate(0deg) scale(.4) translate(0, 0); }

.hero-mark.hunter .s5 { transform: rotate(360deg) scale(.4) translate(0, -5em); }

.hero-mark.hunter .s6 { transform: rotate(360deg) scale(.4) translate(0, 5em); }

.hero-mark.hunter .g1 { width: 6em; height: 15em; transform: rotate(-270deg); }

.hero-mark.hunter .g2 { width: 5em; height: 15em; transform: rotate(-330deg); }

.hero-mark.hunter .g2 .l1 { left: 0; }

.hero-mark.hunter .g2 .l2 { left: 20%; }

.hero-mark.hunter .g2 .l3 { left: 40%; z-index: -1; }

.hero-mark.hunter .g2 .l4 { left: 60%; z-index: -1; }

.hero-mark.hunter .g3 { width: 5em; height: 15em; transform: rotate(330deg); }

.hero-mark.hunter .g3 .l1 { left: 40%; }

.hero-mark.hunter .g3 .l2 { left: 60%; }

.hero-mark.hunter .g3 .l3 { left: 80%; }

.hero-mark.hunter .g3 .l4 { left: 100%; }




@media (prefers-reduced-motion: reduce) {
.hero-mark .circle,
.hero-mark .shape,
.hero-mark .shapes,
.hero-mark .rays,
.hero-mark .line { transition: none; }
}




.hero-util {
position: absolute;
left: 22px;
top: 21px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0;
color: var(--bone-dim);
font-family: var(--font-disp);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .12em;
}

.hero-util a {
color: var(--bone-dim);
font-family: var(--font-cn);
letter-spacing: .12em;
text-decoration: none;
}

.hero-util a:hover { color: var(--accent); }



.qq {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
padding: 0;
background: none;
border: 0;
color: var(--bone-dim);
font-family: var(--font-body);
font-size: 12.5px;
letter-spacing: .08em;
cursor: pointer;
}

.qq b {
color: var(--bone);
font-weight: 400;
font-variant-numeric: tabular-nums;
letter-spacing: .1em;
}

.qq svg {
width: 12px;
height: 12px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.3;
opacity: .6;
}

.qq:hover { color: var(--bone-hi); }
.qq:hover b { color: var(--bone-hi); }
.qq:hover svg { opacity: 1; }


.qq[data-tip] svg { display: none; }

.qq[data-tip]::after {
content: attr(data-tip);
color: var(--accent);
font-family: var(--font-cn);
}




.wordmark-row {
display: flex;
align-items: stretch;
gap: 24px;
}




.hero-sigil {
--sig: 15px;
align-self: center;
color: var(--bone);
}

.wordmark {
margin: 0;
color: var(--bone-hi);
font-family: var(--font-disp);
font-size: 74px;
font-weight: 700;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;


margin-right: -.16em;
}



.wordmark-meta {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
margin: 0;
padding-left: 24px;
color: var(--bone-faint);
font-family: var(--font-disp);
font-size: 11px;
font-weight: 600;
line-height: 1.8;
letter-spacing: .12em;
text-transform: uppercase;
border-left: 1px solid var(--hair-lit);
}



.wordmark-meta .cn {
font-family: var(--font-cn);
font-style: normal;
letter-spacing: .12em;
}



.wordmark-meta .by {
color: var(--bone-dim);
text-transform: none;
}






.support {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--bone-dim);
font-family: var(--font-cn);
font-size: 12.5px;
letter-spacing: .12em;
text-decoration: none;
transition: color .18s ease;
}

.support:hover { color: var(--accent); }

.wordmark-meta .support {
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid var(--hair);
}








.sup-cell { display: flex; gap: 3px; }

.sup-cell i {
width: 6px;
height: 6px;
border: 1px solid currentcolor;
transform: rotate(45deg);
animation: sup-charge 2.4s ease-in-out infinite;
}

.sup-cell i:nth-child(2) { animation-delay: .18s; }
.sup-cell i:nth-child(3) { animation-delay: .36s; }

@keyframes sup-charge {
0%, 44%, 100% { background: none; }
14%, 32% { background: currentcolor; }
}


@media (prefers-reduced-motion: reduce) {
.sup-cell i { background: currentcolor; }
.sup-cell i:last-child { background: none; }
}

.hero-note {
max-width: 60em;
margin: 24px 0 0;
color: var(--bone-dim);
font-size: 14px;
line-height: 1.85;
}


.hero-sub {
max-width: 60em;
margin: 8px 0 0;
color: var(--bone-faint);
font-size: 12.5px;
line-height: 1.9;
}


.hero-sub .pvp-eg { color: var(--pvp); }







.hero-band {
position: relative;
max-width: 1500px;
margin: 0 auto;
padding: 24px 22px;
border-top: 1px solid var(--hair-lit);
border-bottom: 1px solid var(--hair-lit);
}




.hero-search .tool-search {
display: block;
width: min(100%, 704px);
margin-inline: auto;
padding: 13px 22px;
font-size: 14.5px;
border-radius: 999px;



background: var(--panel-b);

transition: width .34s cubic-bezier(.22, .68, .3, 1), border-color .24s ease,
background-color .24s ease, box-shadow .24s ease;
}

.hero-search .tool-search:focus {
width: min(100%, 880px);
background: var(--panel-a);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);
}

.hero-search .tool-count {
margin-top: 16px;
text-align: center;
}




.hero-search .tool-count:empty { margin-top: 0; }

.hero-search .hits:empty { margin-top: 0; }









.pledge {
position: absolute;
right: 22px;


top: 21px;
display: flex;
align-items: center;
gap: 13px;
color: var(--accent);
text-decoration: none;
transition: color .24s ease, opacity .24s ease;
}

.pledge:hover { color: var(--accent-warm); }



.hero-band:has(.tool-search:focus) .pledge {
opacity: 0;
pointer-events: none;
}

.pledge .pl-say {
color: var(--bone-dim);
font-family: var(--font-cn);
font-size: 13px;
letter-spacing: .16em;
white-space: nowrap;
transition: color .24s ease;
}

.pledge:hover .pl-say { color: var(--accent-warm); }

.pl-art {
position: relative;
flex: none;
width: 56px;
height: 56px;
}

.pl-art .ring {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid currentcolor;
}


.pl-art .r1 { width: 50px; height: 50px; margin: -25px; animation: pl-spin 44s linear infinite; }
.pl-art .r2 { width: 36px; height: 36px; margin: -18px; animation: pl-spin 32s linear infinite reverse; }
.pl-art .r3 { width: 22px; height: 22px; margin: -11px; animation: pl-spin 24s linear infinite; }


@keyframes pl-spin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }

.pl-art .orbit {
position: absolute;
inset: 0;
animation: pl-orbit 26s linear infinite;
}

.pledge:hover .orbit { animation-duration: 9s; }

@keyframes pl-orbit { to { transform: rotate(360deg); } }


.pl-art .orbit i {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px;
background: currentcolor;
}

.pl-art .orbit i:nth-child(1) { transform: rotate(0deg) translateY(-22px) rotate(45deg); }
.pl-art .orbit i:nth-child(2) { transform: rotate(60deg) translateY(-22px) rotate(45deg); }
.pl-art .orbit i:nth-child(3) { transform: rotate(120deg) translateY(-22px) rotate(45deg); }
.pl-art .orbit i:nth-child(4) { transform: rotate(180deg) translateY(-22px) rotate(45deg); }
.pl-art .orbit i:nth-child(5) { transform: rotate(240deg) translateY(-22px) rotate(45deg); }
.pl-art .orbit i:nth-child(6) { transform: rotate(300deg) translateY(-22px) rotate(45deg); }

.pl-art .core {
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 11px;
margin: -5.5px;
border: 1px solid currentcolor;
transform: rotate(45deg);
animation: pl-beat 3.4s ease-in-out infinite;
}

@keyframes pl-beat {
0%, 100% { background: none; }
50% { background: currentcolor; }
}

.pledge:hover .core { background: currentcolor; animation-duration: 1.4s; }



.pl-art .lead {
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 1px;
background: linear-gradient(90deg, transparent, currentcolor);
opacity: .34;
transform-origin: 0 50%;
}

.pl-art .d1 { transform: rotate(158deg); }
.pl-art .d2 { transform: rotate(32deg); }
.pl-art .d3 { transform: rotate(272deg); }

.pl-art .lead b {
position: absolute;
top: -1.5px;
left: 0;
width: 4px;
height: 4px;
margin-left: -2px;
background: currentcolor;
border-radius: 50%;
animation: pl-feed 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.pl-art .d2 b { animation-delay: 1.1s; }
.pl-art .d3 b { animation-delay: 2.2s; }

@keyframes pl-feed {
0% { transform: translateX(34px); opacity: 0; }
18%, 68% { opacity: 1; }
85%, 100% { transform: translateX(0); opacity: 0; }
}



@media (prefers-reduced-motion: reduce) {
.pl-art .core { background: currentcolor; }
.pl-art .lead b { opacity: 0; }
}







.hits {
display: grid;
grid-template-columns: minmax(7em, max-content) minmax(8em, max-content) minmax(0, 1fr);
max-width: 1060px;
margin: 24px auto 0;
padding: 0;
list-style: none;
}

.hits li,
.hits .hit {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}

.hits li + li { border-top: 1px solid var(--hair); }

.hits .hit {
gap: 18px;
align-items: baseline;
padding: 11px 14px;
border-radius: 12px;
text-decoration: none;
transition: background-color .18s ease;
}

.hits .hit:hover { background: var(--tint-2); }

.hits .hit b {
color: var(--bone-hi);
font-weight: 600;
}

.hits .hit-at {
color: var(--bone-faint);
font-family: var(--font-disp);
font-size: 11px;
letter-spacing: .12em;
}


.hits .hit-x {
overflow: hidden;
color: var(--bone-dim);
font-size: 12.5px;
white-space: nowrap;
text-overflow: ellipsis;
}


.hits mark {
color: var(--accent);
background: none;
font-weight: 600;
}



.hits-more {
display: block;
margin: 16px auto 0;
padding: 9px 20px;
font-size: 12.5px;
}


.hits.is-in { animation: hits-in .3s cubic-bezier(.22, .68, .3, 1) both; }

@keyframes hits-in {
from {
opacity: 0;
transform: translateY(-8px);
}
}


@media (prefers-reduced-motion: reduce) {
.hero-search .tool-search,
.hits .hit {
transition: none;
}

.hits.is-in { animation: none; }
}

.index {
max-width: 1500px;
margin: 0 auto;
padding: 44px 22px 88px;
}












.group-label {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 24px;
color: var(--bone-hi);
font-family: var(--font-cn);
font-size: 15px;
font-weight: 600;
letter-spacing: .06em;
}

.group-label::before {
content: "";
flex: none;
width: 10px;
height: 2px;
background: var(--bone-faint);
}


.group-label span {
color: var(--bone-dim);
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0;
}

.group-label::after {
content: "";
flex: 1;
height: 1px;
background: var(--hair);
}


.entries + .group-label { margin-top: 88px; }













.entries {
display: grid;
grid-template-columns: repeat(2, minmax(560px, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}


.entries > li { display: grid; }


.entries > li.wide { grid-column: 1 / -1; }




.entry {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: 24px;
color: inherit;
text-decoration: none;
background: linear-gradient(100deg, #171c29, #12151f 64%);
border: 1px solid var(--hair);



clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
transition: background .18s ease, box-shadow .18s ease;
}





.entry::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 2px;




background: var(--edge, var(--accent));
opacity: .38;
transition: opacity .18s ease;
}






.entry::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 16px;
background: linear-gradient(225deg, var(--hair) 0 1px, transparent 1px);
}

.entry:hover {
background: linear-gradient(100deg, #1d2432, #14182333 64%);
box-shadow: inset 0 0 0 1px var(--hair-lit);
}


.entry:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--accent);
}

.entry:hover::after,
.entry:focus-visible::after { opacity: 1; }



body:has(.hero) .entry::after {
transform: scaleY(.5);
transition: opacity .18s ease, transform .32s cubic-bezier(.2, .7, .2, 1);
}

body:has(.hero) .entry:hover::after,
body:has(.hero) .entry:focus-visible::after { transform: none; }




body:has(.hero) main.index { position: relative; }

.routes {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}

.route {
position: absolute;
width: 1px;
background: repeating-linear-gradient(180deg, var(--bone-faint) 0 2px, transparent 2px 7px);
}

.route::before,
.route::after {
content: "";
position: absolute;
left: -3px;
width: 7px;
height: 7px;
background: var(--bone-dim);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.route::before { top: -3px; }

.route::after { bottom: -3px; }

.route b {
position: absolute;
left: -1px;
top: 0;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--accent);
opacity: 0;
animation: route-hop 9s linear infinite var(--d, 0s);
}


@keyframes route-hop {
0% { transform: translateY(0); opacity: 0; }
3% { opacity: 1; }
19% { opacity: 1; }
23% { transform: translateY(var(--len)); opacity: 0; }
100% { transform: translateY(var(--len)); opacity: 0; }
}



.entries > li.k-perk { --edge: var(--c-perk); }
.entries > li.k-legend { --edge: var(--c-legend); }
.entries > li.k-charge { --edge: var(--c-charge); }
.entries > li.k-exotic { --edge: var(--c-exotic); }
.entries > li.k-prism { --edge: var(--c-prism); }
.entries > li.k-artifact { --edge: var(--c-artifact); }
.entries > li.k-enemy { --edge: var(--c-enemy); }
.entries > li.k-buff { --edge: var(--c-buff); }
.entries > li.k-ammo { --edge: var(--c-ammo-special); }


.entry-node {
display: grid;
place-items: center;
width: 56px;
height: 56px;
color: var(--bone-faint);
background: #ffffff05;
border: 1px solid var(--hair);
transition: color .18s ease, background .18s ease;
}

.entry-node svg {
width: 34px;
height: 37px;
}

.entry:hover .entry-node,
.entry:focus-visible .entry-node {
color: var(--edge, var(--accent));
background: color-mix(in srgb, var(--edge, var(--accent)) 9%, transparent);
}




.entry h3 {
margin: 0 0 8px;
color: var(--bone-hi);
font-family: var(--font-cn);
font-size: 24px;
font-weight: 600;
letter-spacing: .05em;
}

.entry p {
margin: 0;
color: var(--bone-dim);
font-size: 14px;
line-height: 1.85;
}


.entry-stamp {
display: block;
margin-top: 16px;
color: var(--bone-faint);
font-family: var(--font-disp);
font-size: 10px;
font-weight: 600;
letter-spacing: .2em;
}





.entry-by {
margin-left: 10px;
padding-left: 10px;
color: var(--bone-dim);
font-family: var(--font-cn);
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
border-left: 1px solid var(--hair-lit);
}

.entry-meta {
display: flex;
gap: 24px;
margin: 0;
text-align: right;
}


.entry-meta div {
flex: none;
padding-left: 24px;
border-left: 1px solid var(--hair);
}

.entry-meta div:first-child { border-left: 0; padding-left: 0; }



.entry-meta dt {
color: var(--bone-faint);
font-family: var(--font-disp);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
}

.entry-meta dd {
margin: 8px 0 0;
color: var(--bone);
font-family: var(--font-disp);
font-size: 20px;
font-weight: 700;
line-height: 1;
transition: color .18s ease;
}

.entry:hover .entry-meta dd,
.entry:focus-visible .entry-meta dd { color: var(--c-arc); }









.index .entry {
padding-top: 18px;
padding-bottom: 18px;
}

.index .entry-body { min-width: 0; }

.index .entry-stamp { margin-top: 10px; }

.pv {
display: block;
margin-top: 10px;
}


.pv-icons {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.pv-icons img {
display: block;
border: 1px solid var(--hair);
}

.pv-shelf { gap: 8px; }



.pv-items {
display: grid;
align-items: center;
gap: 8px 28px;
}

.pv-it {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}

.pv-ic {
display: flex;
flex: none;
gap: 3px;
}

.pv-ic img {
display: block;
border: 1px solid var(--hair);
}

.pv-tx {
display: flex;
flex-direction: column;
min-width: 0;
}

.pv-nm {
color: var(--bone);
font: 12.5px/1.45 var(--font-cn);
white-space: nowrap;
}


.pv-it[class*="b-"] .pv-nm {
color: var(--accent);
font-weight: 600;
}

.pv-sb {
color: var(--bone-faint);
font: 11.5px/1.4 var(--font-cn);
white-space: nowrap;
}

.pv-sb b {
margin-right: 6px;
color: var(--bone-hi);
font: 700 13px/1.3 var(--font-disp);
}



.pv-rank {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: 3px 10px;
max-width: 520px;
}

.pv-rn {
color: var(--bone-faint);
font: 600 11px/1 var(--font-disp);
}

.pv-rank img {
display: block;
border: 1px solid var(--hair);
}


.pv-rank > i { width: 0; }

.pv-rname {
position: relative;
overflow: hidden;
padding-bottom: 4px;
color: var(--bone);
font: 13px/1.5 var(--font-cn);
white-space: nowrap;
text-overflow: ellipsis;
}

.pv-rname s {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
background: var(--edge, var(--accent));
opacity: .55;
}

.pv-rank b {
color: var(--bone-hi);
font: 700 14px/1 var(--font-disp);
text-align: right;
}

.pv-curve { max-width: 360px; }

.pv-curve svg {
display: block;
width: 100%;
height: 52px;
overflow: visible;
}

.pv-curve path {
fill: none;
stroke: var(--edge, var(--accent));
stroke-width: 1.6;
vector-effect: non-scaling-stroke;
}

.pv-curve circle { fill: var(--bone-hi); }

.pv-curve text {
fill: var(--bone-dim);
font: 600 10px var(--font-disp);
text-anchor: middle;
}

.pv-ax {
display: flex;
justify-content: space-between;
margin-top: 4px;
color: var(--bone-faint);
font: 11px/1.5 var(--font-cn);
}




.pv-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
color: var(--bone);
}

.pv-chips em {
color: var(--bone-faint);
font-size: 12px;
font-style: normal;
}

.pv-chip {
padding: 2px 9px;
border: 1px solid var(--hair-lit);
font: 12.5px/1.6 var(--font-cn);
}

.pv-chip.is-hot {
color: var(--ink);
background: var(--accent);
border-color: var(--accent);
}

.pv-chip.is-now {
color: var(--bone-hi);
border-color: var(--edge, var(--accent));
}

.pv-swatch {
display: flex;
gap: 4px;
}

.pv-swatch i {
width: 26px;
height: 26px;
}

.pv-shots {
display: flex;
gap: 10px;
}

.pv-shots > span {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--bone-dim);
font: 12px/1.4 var(--font-cn);
}

.pv-shots img {
display: block;
border: 1px solid var(--hair);
object-fit: cover;
}

.pv-lines {
display: flex;
flex-direction: column;
color: var(--bone-dim);
font: 12.5px/1.8 var(--font-cn);
}


.pv-table {
display: inline-grid;
align-items: baseline;
gap: 4px 22px;
}

.pv-table small {
color: var(--bone-faint);
font: 11.5px/1.4 var(--font-cn);
text-align: right;
}

.pv-table small:first-child { text-align: left; }

.pv-th {
color: var(--bone-dim);
font: 12.5px/1.5 var(--font-cn);
}

.pv-table b {
color: var(--bone-hi);
font: 700 15px/1.3 var(--font-disp);
text-align: right;
}


.pv-rota {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 4px 14px;
max-width: 520px;
color: var(--bone);
}

.pv-rota small {
color: var(--bone-faint);
font: 12px/1.5 var(--font-cn);
}

.pv-rv {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}

.pv-rv i {
color: var(--bone-faint);
font-size: 12px;
font-style: normal;
}

.pv-rota em {
color: var(--bone-faint);
font: 600 10.5px/1.4 var(--font-disp);
font-style: normal;
letter-spacing: .12em;
text-align: right;
}

.pv-rota .pv-chip { padding: 1px 8px; }


.site-foot {
max-width: 1500px;
margin: 0 auto;
padding: 44px 22px 88px;
color: var(--bone-dim);
font-size: 12.5px;
line-height: 1.9;
border-top: 1px solid var(--hair);
}

.site-foot p { margin: 0 0 5px; }


.site-foot .stamp {
display: inline-block;
margin-right: 10px;
padding: 0 7px;
color: var(--bone-dim);
font-family: var(--font-disp);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
border: 1px solid var(--hair);
}

.site-foot p:last-child { margin-bottom: 0; }


.site-foot .legal {
max-width: 100ch;
color: var(--bone-faint);
font-size: 11.5px;
line-height: 1.85;
}

.site-foot a { color: var(--bone-dim); }

.site-foot a:hover { color: var(--bone-hi); }



.site-foot a.beian::before {
content: "";
display: inline-block;
width: 12px;
height: 14px;
margin-right: 5px;
vertical-align: -3px;
background-image: url(e17a0a60ac.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}








.rec, .r-head { display: grid; }
.rec { border-top: 1px solid var(--hair); }
.r-head { margin-top: 12px; background: var(--head-fill); border-bottom: 1px solid var(--hair-lit); }
.r-head > div { padding: 8px 10px; white-space: nowrap; font: 600 12.5px var(--font-cn);
color: var(--bone-dim); }
.r-head > .c { text-align: center; }
.r-head > .l { text-align: left; }
.r-head > div + div, .rec > .r-cell + .r-cell { border-left: 1px solid var(--hair); }
.r-head + .rec, .r-grp + .rec { border-top: 0; }
.r-grp { padding: 16px 16px 8px; font: 600 13px var(--font-cn); color: var(--bone-dim);
border-bottom: 1px solid var(--hair); }

.r-cell { min-width: 0; padding: 9px 14px; display: flex; flex-direction: column;
justify-content: center; }
.r-cell.r-id { align-items: center; text-align: center; gap: 4px; background: var(--tint-1); }
.r-cell.r-mid { align-items: center; text-align: center; }
.r-cell p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.65; }
.r-cell p:last-child { margin-bottom: 0; }
.r-id .r-nm { font: 600 14.5px/1.35 var(--font-cn); color: var(--bone-hi); }
.r-id .r-nm.exo, .rec .exo { color: var(--exotic); }
.r-id .r-sub { display: flex; flex-direction: column; align-items: center; font-size: 12.5px;
line-height: 1.6; color: var(--bone-dim); }
.r-id .r-sub b, .rec .dim b { color: var(--bone-hi); font-weight: 600; }
.rec .dim, .ci-grp .dim { color: var(--bone-dim); }


.r-plain.r-c0 { grid-template-columns: 11em minmax(0, 1fr); }
.r-plain.r-c1 { grid-template-columns: 11em minmax(0, 1fr) 13em; }
.r-plain.r-c1.r-narrow { grid-template-columns: 11em minmax(0, 1fr) 7.5em; }
.r-plain.r-c2 { grid-template-columns: 11em minmax(0, 1fr) 9em 12em; }
.r-plain .r-id > img { width: 48px; height: 48px; }
.r-plain > .x-au-who { grid-column: 1; }
.r-plain > .x-au-body { grid-column: 2 / -1; }
.r-val { font-size: 12.5px; line-height: 1.75; color: var(--bone-dim); }
.r-val > div { white-space: nowrap; }
.r-val b { color: var(--bone-hi); font-weight: 600; }
.r-slots { display: flex; justify-content: center; align-items: center; gap: 6px; }
.r-slots i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--bone-dim); }


.r-sub-row { margin-top: 9px; padding: 8px 12px; background: var(--tint-2);
border-left: 2px solid var(--hair-lit); }
.r-sub-h { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 6px;
font-size: 12.5px; color: var(--bone-dim); }
.r-sub-h > b { font-weight: 600; color: var(--bone); }
.r-sub-h > img { width: 20px; height: 20px; }
.r-sub-h span[class^="el-"] { font-weight: 600; }


.r-exotic { grid-template-columns: 12em 7.5em minmax(0, 1fr); }
.r-exotic.has-au > .r-id { grid-row: span 2; }
.r-exotic > .r-perk { grid-column: 2 / -1; }
.r-exotic > .x-au-who { grid-column: 2; }
.r-exotic > .x-au-body { grid-column: 3; }
.r-exotic .r-id > img { width: 56px; height: 56px; }
.xp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 6px; }
.xp:last-of-type { margin-bottom: 8px; }
.xp-1 { display: inline-flex; align-items: center; gap: 8px; }

.xp-pick {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
padding: 4px 12px;
border: 1px solid var(--hair-lit);
border-radius: 999px;
}

.xp-of { color: var(--bone-dim); font: 400 11.5px var(--font-body); letter-spacing: .06em; }
.xp-1 > img { width: 28px; height: 28px; border-radius: 50%; }
.xp-n { font: 600 14.5px var(--font-cn); color: var(--exotic); }




.r-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.r-tag { display: inline-block; padding: 1px 8px; font: 600 12px/1.7 var(--font-cn);
color: var(--bone-hi); background: #ffffff12; }
.why { display: flex; align-items: baseline; gap: 9px; }
.why > .r-tag { flex: none; }

.why > .why-t { min-width: 0; font-weight: 400; }


.x-au-who, .x-au-body { padding: 5px 14px; border-top: 1px dashed var(--hair);
background: #ffffff03; }
.rec > .x-au-body { border-left: 0; }
.rec > .x-au-who { border-left: 0; }
.x-au-who { gap: 6px; }
.x-au-name { display: flex; justify-content: center; align-items: center; gap: 8px;
font: 600 12.5px/1.5 var(--font-cn); }
.x-au-who .r-tags { justify-content: center; }
.x-au-body p { color: var(--note); font-size: 13px; line-height: 1.65; }


.x-au-name .w-aegis { color: var(--au-aegis); }
.x-au-name .w-lgpig { color: var(--au-lgpig); }
.r-tier { flex: none; min-width: 28px; padding: 1px 5px; text-align: center;
font: 700 12.5px/1.3 var(--font-disp); color: var(--bone-hi); border: 1px solid; }
.r-tier.by-a { border-color: var(--au-aegis); }
.r-tier.by-l { border-color: var(--au-lgpig); }
.r-tier-long { font-size: 12px; line-height: 1.6; color: var(--bone); }


.f-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 18px;
margin-bottom: 6px; font-size: 12.5px; }
.f-k { color: var(--bone-faint); margin-right: 4px; }
.f-k::after { content: "："; }
.f-v { font-weight: 400; color: var(--bone); white-space: nowrap; }


.mem { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 9px;
font-size: 12.5px; color: var(--bone-dim); }
.mem-1 { display: flex; align-items: center; gap: 6px; }
.mem-1 > img { width: 20px; height: 20px; }


.ci-grp { padding: 18px 0 6px; }
.ci-grp + .ci-grp { border-top: 1px solid var(--hair-lit); margin-top: 10px; }
.ci-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
font: 600 15px var(--font-cn); color: var(--bone-hi); }
.ci-h > img { width: 28px; height: 28px; }
.ci-h > img + img { margin-left: -4px; }
.ci-h .dim { font-size: 12.5px; font-weight: 400; }
.sp-head, .sp-row { display: grid;
grid-template-columns: 9.5em minmax(0, 1fr) 9.5em minmax(0, 1fr); }
.sp-head h4 { grid-column: span 2; margin: 0; padding: 8px 0; text-align: center;
font: 600 12.5px var(--font-cn); color: var(--bone-dim);
background: var(--head-fill); border-bottom: 1px solid var(--hair-lit); }
.sp-head h4 + h4, .sp-row > .r-cell:nth-child(3) { border-left: 1px solid var(--hair-lit); }
.sp-row { border-top: 1px solid var(--hair); }
.sp-head + .sp-row { border-top: 0; }
.sp-row > .r-cell:nth-child(2), .sp-row > .r-cell:nth-child(4) { border-left: 1px solid var(--hair); }
.sp-row .r-id > img { width: 40px; height: 40px; }
.sp-row .r-id .r-nm { font-size: 14px; }
.sp-row p { font-size: 13px; line-height: 1.7; }


.mx-head, .mx-row { display: grid; grid-template-columns: 9em repeat(5, minmax(0, 1fr)); }
.mx-head > div { display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 10px; font: 600 12.5px var(--font-cn); color: var(--bone-dim);
background: var(--head-fill); border-bottom: 1px solid var(--hair-lit); }
.mx-head > div + div, .mx-row > .r-cell + .r-cell { border-left: 1px solid var(--hair); }
.mx-row { border-top: 1px solid var(--hair); }
.mx-head + .mx-row { border-top: 0; }
.mx-row > .r-cell { padding: 8px; gap: 5px; font-size: 12.5px; }
.mx-row img { width: 28px; height: 28px; }
.mx-head img { width: 20px; height: 20px; }
.mx-row > .r-id .r-nm { font-size: 14px; }


.r-weapon { grid-template-columns: 3em 9em 10.5em repeat(5, minmax(0, 1fr)) 7.5em; }
.r-weapon.has-au > .r-rank, .r-weapon.has-au > .r-id, .r-weapon.has-au > .x-facts { grid-row: span 2; }
.r-weapon > .x-au-who { grid-column: 4; }
.r-weapon > .x-au-body { grid-column: 5 / -1; }
.r-weapon .r-id > img { width: 48px; height: 48px; }
.r-rank { font: 700 16px var(--font-disp); color: var(--bone-faint); }
.x-mini { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 2px;
font-size: 12px; line-height: 1.6; color: var(--bone-dim); }
.x-mini > div { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.x-mini b { color: var(--bone-hi); font-weight: 600; }
.x-mini [class^="el-"] { font-weight: 600; }
.x-facts { align-items: flex-start; }
.x-facts dl { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 5px;
margin: 0; font-size: 12.5px; line-height: 1.5; }
.x-facts dt { color: var(--bone-faint); white-space: nowrap; }
.x-facts dt::after { content: "："; }
.x-facts dd { margin: 0; display: flex; align-items: center; gap: 5px; color: var(--bone);
text-align: left; white-space: nowrap; }
.x-mini img, .x-facts img { width: 16px; height: 16px; }
.r-slot { padding: 12px 8px; }

.rest-wait { margin: 14px 0 0; font-size: 13px; color: var(--bone-faint); }


.r-cell.r-slot { display: grid; justify-content: center; justify-items: start; align-content: center;
gap: 7px; }
.r-plug { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.35;
color: var(--c-perk); text-align: left; }
.r-plug .ico { position: relative; display: inline-block; flex: none; margin: 4px; }
.r-plug .ico > img { display: block; width: 22px; height: 22px; border-radius: 50%; }


.r-plug.by-a { --halo: var(--au-aegis); }
.r-plug.by-l { --halo: var(--au-lgpig); }
.r-plug.by-al { --halo: var(--halo-both); }
.r-plug[class*="by-"] .ico::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
background: var(--halo);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.r-plug s { color: var(--bone-faint); }
.r-plug-none { font-size: 12.5px; color: var(--bone-faint); }
.r-plug.r-mwp { color: var(--bone); }