.ability-page{--ability:#7ad6c4;min-height:100vh;background:#050a0a;color:#e3e8e5;position:relative;isolation:isolate}.ability-page:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(122,214,196,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(122,214,196,.018) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(#000,transparent 88%)}
.ability-head{height:92px;padding:0 clamp(18px,4vw,62px);display:grid;grid-template-columns:170px 1fr auto;gap:30px;align-items:center;border-bottom:1px solid rgba(122,214,196,.14);background:#050a0af5;position:relative;z-index:5}.ability-head h1{font-size:28px;font-weight:300;margin:4px 0 0}.ability-head .kicker{margin:0}.ability-back{border:0;background:none;color:#8a9b99;cursor:pointer;text-align:left;padding:12px 0}.ability-back:hover{color:#7ad6c4}.ability-access small{display:block;font:9px 'Roboto Mono';letter-spacing:.18em;color:#667a79;margin-bottom:8px}.ability-access>div{display:flex}.ability-access button{font:9px 'Roboto Mono';letter-spacing:.1em;color:#8a9b99;border:1px solid rgba(122,214,196,.14);background:#101c1a;padding:8px 11px;cursor:pointer}.ability-access button+button{border-left:0}.ability-access button.active,.ability-access button:hover{color:#050a0a;background:#7ad6c4;border-color:#7ad6c4}
.ability-main{width:min(1220px,92vw);margin:0 auto;padding:30px 0 90px;position:relative;z-index:1}.ability-crumb{display:flex;align-items:center;gap:8px;min-height:28px;font:9px 'Roboto Mono';letter-spacing:.1em;color:#667a79}.ability-crumb button{border:0;background:none;color:#7ad6c4;padding:0;cursor:pointer;font:inherit}.ability-crumb b{font-weight:400;color:#8a9b99}.ability-intro{display:flex;justify-content:space-between;gap:40px;align-items:end;margin:42px 0 24px;padding-bottom:22px;border-bottom:1px solid rgba(122,214,196,.14)}.ability-intro small,.ability-category-title small,.ability-known header small,.ability-unknown header small{font:9px 'Roboto Mono';letter-spacing:.18em;color:#667a79}.ability-intro h2{font-size:34px;font-weight:300;margin:8px 0}.ability-intro p{max-width:650px;color:#8a9b99;font-size:13px;line-height:1.8}.ability-intro>span{font:9px 'Roboto Mono';letter-spacing:.14em;color:#667a79}.ability-intro>span b{display:block;color:#7ad6c4;font-size:34px;font-weight:300}
.category-physical{--ability:#7ad6c4}.category-mental{--ability:#d4c07a}.category-element{--ability:#c4746a}.category-spacetime{--ability:#e3e8e5}
.ability-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.ability-category{min-height:310px;padding:30px;position:relative;overflow:hidden;text-align:left;color:#e3e8e5;border:1px solid color-mix(in srgb,var(--ability) 25%,transparent);background:#101c1a;cursor:pointer;transition:.22s}.ability-category:hover,.ability-category:focus-visible{border-color:color-mix(in srgb,var(--ability) 58%,transparent);background:#172421;transform:translateY(-2px)}.ability-category>small{font:9px 'Roboto Mono';letter-spacing:.2em;color:var(--ability)}.ability-category h3{font-size:34px;font-weight:300;margin:12px 0}.ability-category p{max-width:420px;color:#8a9b99;font-size:12px;line-height:1.8}.ability-category>div{position:absolute;left:30px;right:30px;bottom:30px;display:grid;gap:5px;font-size:10px;color:#667a79}.ability-category>div b{font-weight:400;color:var(--ability)}.ability-category>em{position:absolute;right:28px;bottom:28px;font:8px 'Roboto Mono';letter-spacing:.12em;color:var(--ability);font-style:normal}.category-glyph{position:absolute;right:24px;top:24px;width:112px;height:112px;opacity:.34}.category-physical>.category-glyph i{position:absolute;border:1px solid var(--ability);border-radius:50%;inset:0}.category-physical>.category-glyph i:nth-child(2){inset:18px}.category-physical>.category-glyph i:nth-child(3){inset:38px}.category-mental>.category-glyph{display:flex;justify-content:center;align-items:center;gap:8px;transform:rotate(-12deg)}.category-mental>.category-glyph i{width:1px;height:72px;background:var(--ability)}.category-mental>.category-glyph i:nth-child(2),.category-mental>.category-glyph i:nth-child(4){height:46px}.category-mental>.category-glyph i:nth-child(3){height:98px}.category-element>.category-glyph i{position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#e3e8e5 0 2%,var(--ability) 12%,transparent 66%);border:1px solid var(--ability);box-shadow:0 0 30px color-mix(in srgb,var(--ability) 35%,transparent)}.category-spacetime>.category-glyph{display:grid;place-items:center;border:1px dashed rgba(227,232,229,.25)}.category-spacetime>.category-glyph small{font:8px 'Roboto Mono';line-height:1.7;letter-spacing:.14em;text-align:center;color:#667a79}
.ability-category-title{position:relative;min-height:165px;margin:34px 0 20px;padding:24px 240px 24px 145px;border:1px solid color-mix(in srgb,var(--ability) 20%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--ability) 8%,transparent),transparent 48%),#101c1a}.ability-category-title>.category-glyph{left:20px;right:auto;top:25px}.ability-category-title h2{font-size:38px;font-weight:300;margin:8px 0}.ability-category-title p{font-size:12px;line-height:1.75;color:#8a9b99}.ability-category-title aside{position:absolute;right:24px;top:28px;text-align:right}.ability-category-title aside>*{display:block}.ability-category-title aside span{font:11px 'Roboto Mono';letter-spacing:.12em;color:var(--ability)}.ability-category-title aside b,.ability-category-title aside em{font-size:10px;font-weight:400;font-style:normal;color:#8a9b99;margin-top:9px}
.ability-filter{display:flex;align-items:center;gap:12px;margin:18px 0 34px}.ability-filter>span{font:8px 'Roboto Mono';letter-spacing:.14em;color:#667a79;margin-right:4px}.ability-filter>div{display:flex;gap:6px}.ability-filter button{height:35px;padding:0 14px;border:1px solid rgba(122,214,196,.16);background:#101c1a;color:#8a9b99;font:9px 'Roboto Mono';cursor:pointer}.ability-filter button.active,.ability-filter button:hover{color:#050a0a;background:#7ad6c4;border-color:#7ad6c4}.ability-filter>button{margin-left:auto}.ability-filter>button:disabled{opacity:.35;cursor:not-allowed}.ability-known,.ability-unknown{margin:30px 0}.ability-known>header,.ability-unknown>header{display:flex;justify-content:space-between;align-items:end;padding:0 3px 10px;border-bottom:1px solid rgba(122,214,196,.12)}.ability-known h3,.ability-unknown h3{font-size:22px;font-weight:300;margin:6px 0 0}.ability-known>header>span,.ability-unknown>header>span{font:11px 'Roboto Mono';color:#667a79}.ability-unknown{margin-top:58px;padding-top:22px;border-top:1px dashed rgba(227,232,229,.15)}.ability-unknown>p{font-size:10px;color:#667a79;margin:14px 3px}.ability-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.ability-card{--pattern:var(--ability);position:relative;min-height:190px;padding:19px 18px 42px;text-align:left;color:#e3e8e5;border:1px solid color-mix(in srgb,var(--ability) 20%,transparent);background:#101c1a;cursor:pointer;overflow:hidden;transition:.2s}.ability-card:hover,.ability-card:focus-visible{border-color:color-mix(in srgb,var(--ability) 55%,transparent);background:#172421;transform:translateY(-2px)}.ability-card.type-attack{border-left:3px solid var(--ability)}.ability-card.type-support{outline:1px solid color-mix(in srgb,var(--ability) 12%,transparent);outline-offset:-6px}.ability-card.type-buff:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--ability) 4%,transparent) 10px 12px);pointer-events:none}.ability-card.type-unknown{--ability:#8a9b99;border-style:dashed;filter:saturate(.4)}.ability-code{position:absolute;right:15px;top:14px;font:20px 'Roboto Mono';font-weight:300;color:color-mix(in srgb,var(--ability) 38%,transparent)}.ability-card>small{font:8px 'Roboto Mono';letter-spacing:.12em;color:var(--ability)}.ability-card h4{font-size:22px;font-weight:300;margin:18px 0 10px}.ability-card p{font-size:11px;line-height:1.7;color:#8a9b99}.ability-card>em{position:absolute;left:17px;bottom:14px;font:8px 'Roboto Mono';font-style:normal;color:#d4c07a}.ability-card>i{position:absolute;right:16px;bottom:14px;font:8px 'Roboto Mono';font-style:normal;letter-spacing:.1em;color:var(--ability)}.ability-card.locked{cursor:not-allowed;border-color:rgba(212,192,122,.18);background:repeating-linear-gradient(135deg,#101713,#101713 6px,#121a15 6px,#121a15 12px)}.ability-empty{padding:48px;text-align:center;border:1px dashed rgba(122,214,196,.16);margin-top:10px}.ability-empty>*{display:block}.ability-empty b{font:10px 'Roboto Mono';letter-spacing:.18em;color:#7ad6c4}.ability-empty span{font-size:11px;color:#667a79;margin-top:10px}
.ability-detail{margin-top:34px}.ability-detail>header{position:relative;display:grid;grid-template-columns:110px 1fr auto;gap:24px;align-items:center;min-height:155px;padding:24px;border:1px solid color-mix(in srgb,var(--ability) 22%,transparent);background:linear-gradient(105deg,color-mix(in srgb,var(--ability) 8%,transparent),transparent 55%),#101c1a}.ability-detail-glyph{position:relative;inset:auto;width:96px;height:96px}.ability-detail>header small,.ability-definition small,.ability-holders>small,.ability-related>small{font:8px 'Roboto Mono';letter-spacing:.17em;color:var(--ability)}.ability-detail>header h2{font-size:38px;font-weight:300;margin:8px 0}.ability-detail>header p{font-size:11px;color:#8a9b99}.ability-detail>header aside{text-align:right}.ability-detail>header aside>*{display:block}.ability-detail>header aside span{font:300 46px 'Roboto Mono';color:var(--ability)}.ability-detail>header aside b{font:8px 'Roboto Mono';letter-spacing:.15em;color:#d4c07a;margin-top:8px}.ability-detail-grid{display:grid;grid-template-columns:1fr 370px;gap:16px;margin-top:16px}.ability-definition{position:relative;padding:24px 28px;margin-bottom:9px;border:1px solid color-mix(in srgb,var(--ability) 13%,transparent);background:#101c1a}.ability-definition:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--ability);opacity:.45}.ability-definition h3,.ability-holders h3,.ability-related h3{font-size:21px;font-weight:300;margin:7px 0 12px}.ability-definition p{font-size:13px;line-height:2;color:#a4b2b0}.ability-definition.conflict{border-color:rgba(212,192,122,.22)}.ability-definition.conflict:before{background:#d4c07a}.ability-side{display:grid;align-content:start;gap:12px}.ability-holders,.ability-related{padding:22px;border:1px solid color-mix(in srgb,var(--ability) 14%,transparent);background:#101c1a}.ability-holders>div{display:grid;gap:7px}.ability-holders button,.holder-note,.ability-related button{position:relative;display:grid;gap:5px;padding:12px;text-align:left;border:1px solid color-mix(in srgb,var(--ability) 17%,transparent);background:#0a1111;color:#e3e8e5;cursor:pointer}.ability-holders button:hover,.ability-related button:hover{border-color:color-mix(in srgb,var(--ability) 48%,transparent)}.ability-holders button:disabled{cursor:not-allowed;color:#d4c07a}.ability-holders button span,.holder-note span,.ability-related button span{font-size:13px}.ability-holders button small,.holder-note small,.ability-related button small{font:8px 'Roboto Mono';line-height:1.5;color:#667a79}.ability-holders button i,.holder-note i{position:absolute;right:10px;top:12px;font:7px 'Roboto Mono';font-style:normal;color:var(--ability)}.holder-note{filter:saturate(.25)}.ability-related{display:grid;gap:7px}.ability-related>h3{margin-bottom:5px}.ability-related button{width:100%}.ability-holders>p,.ability-related>p{font-size:11px;color:#667a79;line-height:1.8}.ability-foot{position:fixed;z-index:4;left:0;right:0;bottom:0;height:36px;padding:0 4vw;background:#050a0af2;border-top:1px solid rgba(122,214,196,.1);display:flex;justify-content:space-between;align-items:center;font:8px 'Roboto Mono';letter-spacing:.12em;color:#667a79}
@media(max-width:900px){.ability-head{height:132px;grid-template-columns:130px 1fr;padding-top:12px;padding-bottom:12px}.ability-access{grid-row:2;grid-column:1/3;display:flex;align-items:center;justify-content:space-between}.ability-list{grid-template-columns:repeat(2,1fr)}.ability-detail-grid{grid-template-columns:1fr}.ability-main{padding-bottom:80px}}
@media(max-width:620px){.ability-head{grid-template-columns:1fr auto;gap:10px}.ability-head>div:nth-child(2){grid-row:1;grid-column:1}.ability-back{grid-row:1;grid-column:2}.ability-access{grid-row:2;grid-column:1/3}.ability-head h1{font-size:22px}.ability-main{width:90vw}.ability-intro{align-items:start;flex-direction:column}.ability-intro>span{display:none}.ability-category-grid,.ability-list{grid-template-columns:1fr}.ability-category{min-height:285px;padding:23px}.ability-category-title{padding:138px 20px 22px}.ability-category-title>.category-glyph{left:20px}.ability-category-title aside{right:18px;top:25px}.ability-filter{align-items:start;flex-direction:column}.ability-filter>div{width:100%;overflow-x:auto;padding-bottom:5px}.ability-filter button{flex:0 0 auto}.ability-filter>button{margin-left:0}.ability-detail>header{grid-template-columns:84px 1fr}.ability-detail>header aside{grid-column:1/3;text-align:left}.ability-detail>header aside span{font-size:32px}.ability-detail-glyph{width:75px;height:75px}.ability-detail>header h2{font-size:30px}.ability-foot{padding:0 3vw}}
@media(prefers-reduced-motion:reduce){.ability-category,.ability-card{transition:none}}