.lp{max-width:1320px;margin:0 auto;padding:22px 20px 56px;font:16px/1.5 var(--f-ui);color:var(--tx)}
.lp button{font-family:inherit;color:inherit}
.lp :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lp [hidden]{display:none!important}
.lp-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin:0 0 16px}
.lp-head h1{display:flex;align-items:center;gap:12px;margin:0;color:var(--hi);font:30px/1 var(--f-num);letter-spacing:1.5px;text-transform:uppercase}
.lp-head h1::before{content:'';width:8px;height:28px;background:var(--acc);transform:skewX(-14deg)}
.lp-count{margin:0;color:var(--dim);font:16px var(--f-ui)}
.lp-count b{color:var(--hi);font:20px var(--f-num);letter-spacing:.5px}
.lp-note{flex-basis:100%;margin:-2px 0 0;color:var(--dim);font:15px/1.45 var(--f-ui)}
.lp-note a{color:var(--link)}
.lf{position:relative;margin:0 0 26px;padding:14px 16px;background:var(--pn);border:1px solid var(--ln);border-top:3px solid var(--acc);box-shadow:var(--sh)}
.lf::after{content:'';position:absolute;top:0;right:14px;width:34px;height:5px;background:var(--acc);clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,5px 100%)}
.lf-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.lf-q{position:relative;flex:1 1 320px;display:flex;align-items:center;margin:0;min-width:0}
.lf-q svg{position:absolute;left:13px;width:19px;height:19px;fill:none;stroke:var(--dim);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.lf-q input{width:100%;height:44px;padding:0 44px 0 42px;border:1px solid var(--ln);border-radius:0;background:var(--pn2);color:var(--hi);
  font:17px var(--f-ui);letter-spacing:.3px;outline:none;transition:border-color .15s,background .15s}
.lf-q input::placeholder{color:var(--dim)}
.lf-q input:focus{border-color:var(--acc);background:var(--pg)}
.lf-q input::-webkit-search-cancel-button{-webkit-appearance:none;width:16px;height:16px;cursor:pointer;
  background:linear-gradient(45deg,transparent 43%,var(--dim) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--dim) 43% 57%,transparent 57%)}
.lf-q kbd{position:absolute;right:12px;padding:1px 7px;border:1px solid var(--ln);border-radius:3px;background:var(--pn);color:var(--dim);font:12px/1.4 var(--f-lbl);box-shadow:none}
.lf-q input:focus~kbd,.lf-q input:not(:placeholder-shown)~kbd{display:none}
.lf-sort{display:flex;align-items:center;gap:9px;margin:0}
.lf-sort span{color:var(--acc-tx);font:13px var(--f-lbl);letter-spacing:2px;text-transform:uppercase}
.lf-sort select{height:44px;padding:0 34px 0 12px;border:1px solid var(--ln);border-radius:0;background:var(--pn2);color:var(--hi);font:16px var(--f-ui);cursor:pointer;
  -webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(-45deg,transparent 50%,var(--dim) 50%);
  background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.lf-dir{position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 15px;border:0;background:none;color:var(--hi);
  font:15px/1 var(--f-lbl);letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.lf-dir::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--pn2);border:1px solid var(--ln);transform:skewX(-14deg);transition:border-color .15s,background .15s}
.lf-dir:hover::before{border-color:var(--acc);background:var(--pn3)}
.lf-dir svg{width:16px;height:16px;fill:none;stroke:var(--acc-tx);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.lf-dir[data-dir="asc"] svg{transform:rotate(180deg)}
.lf-zr i{position:relative;width:15px;height:15px;border:2px solid var(--dim);transform:skewX(-10deg);transition:border-color .15s,background .15s}
.lf-zr.on i{border-color:var(--acc);background:var(--acc)}
.lf-zr.on i::after{content:'';position:absolute;left:3px;top:0;width:5px;height:8px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lf-zr.on::before{border-color:var(--acc)}
.lf-more{display:none}
.lf-more b{margin-left:4px;color:var(--acc-tx)}
.lf-more b:empty{display:none}
.lf-body{display:flex;flex-direction:column;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--ln)}
.lf-groups{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto auto;gap:14px 26px;align-items:end}
.lf-grp{display:flex;flex-direction:column;gap:8px;min-width:0}
.lf-groups .lf-chips{flex-wrap:nowrap}
.lf-groups .fc{flex:1 1 0;min-width:0;padding:0 6px}
.lf-l{color:var(--acc-tx);font:12px/1 var(--f-lbl);letter-spacing:2px;text-transform:uppercase}
.lf-chips{display:flex;flex-wrap:wrap;gap:6px}
.fc,.sg{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 13px;border:0;background:none;
  color:var(--tx);font:15px/1 var(--f-lbl);letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:color .15s,filter .15s}
.fc::before,.sg::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--pn2);border:1px solid var(--ln);transform:skewX(-14deg);transition:background .15s,border-color .15s,box-shadow .15s}
.fc:hover::before,.sg:hover::before{border-color:var(--acc)}
.fc.on,.sg.on{color:var(--ink)}
.fc.on::before,.sg.on::before{background:var(--acc);border-color:var(--acc);box-shadow:0 0 16px -4px rgba(255,198,26,.65)}
.fc img,.sg img{display:block;height:26px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
#f-rar .fc img{height:28px}
#f-el .fc img{height:26px}
.fc:not(.on) img{filter:grayscale(.35) brightness(.92) drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.fc:not(.on):hover img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.lf-seg{display:inline-flex;gap:4px}
.sg{height:36px;padding:0 15px;font-size:14px}
.lf-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;align-items:start}
.lf-pick{align-items:stretch}
.lf-pick .lf-tm{align-self:flex-start}
.lf-tagbox{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:44px;padding:5px 8px;
  border:1px solid var(--ln);background:var(--pn2);cursor:text}
.lf-tagbox:focus-within{border-color:var(--acc);background:var(--pg)}
.lf-tagsel{display:contents}
.lf-tag{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 4px 0 12px;background:var(--pn3);color:var(--hi);font:15px var(--f-lbl);
  letter-spacing:.3px;clip-path:var(--slant)}
.lf-tag.trait{background:color-mix(in srgb,var(--acc) 26%,var(--pn3))}
.lf-tag button{width:24px;height:24px;padding:0;border:0;background:none;color:var(--dim);font:20px/1 var(--f-ui);cursor:pointer}
.lf-tag button:hover{color:var(--hi)}
.lf-tagbox input{flex:1 1 140px;min-width:120px;height:32px;border:0;background:none;color:var(--hi);font:16px var(--f-ui);outline:none}
.lf-tagbox input::placeholder{color:var(--dim)}
.lf-taglist{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:30;max-height:min(420px,60vh);margin:0;padding:0 0 6px;overflow-y:auto;list-style:none;
  background:var(--pn);border:1px solid var(--ln);border-top:3px solid var(--acc);box-shadow:0 18px 36px rgba(0,0,0,.45)}
.lf-taglist li{padding:7px 16px;color:var(--tx);font:16px/1.25 var(--f-ui);cursor:pointer}
.lf-taglist li.hi,.lf-taglist li:hover{background:var(--pn2);color:var(--hi);box-shadow:inset 3px 0 0 var(--acc)}
.lf-taglist li.none{color:var(--dim);cursor:default;box-shadow:none;background:none}
.lf-taglist li.grp{position:sticky;top:0;z-index:1;padding:8px 16px 6px;background:var(--pn);color:var(--acc-tx);font:12px var(--f-lbl);letter-spacing:2px;
  text-transform:uppercase;cursor:default;box-shadow:0 1px 0 var(--ln)}
.lf-taglist li.grp:hover{background:var(--pn);color:var(--acc-tx)}
.lf-clear b{margin-left:4px;color:var(--acc-tx)}
.lf-clear b:empty{display:none}
.lf-clear:disabled{opacity:.4;cursor:default}
.lf-mini .lf-top .lf-seg{flex:none}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,206px);justify-content:center;gap:22px 0}
.lp-grid>.chara-list{display:block;width:206px;padding:0 8px;margin:0;content-visibility:auto;contain-intrinsic-size:auto 206px auto 182px}
.lp-grid>.chara-list>div{width:190px}
.lp-grid .character-thumb{display:block}
.lp-empty{padding:50px 0;text-align:center;color:var(--dim);font:18px var(--f-ui)}
.lp-empty p{margin:0 0 16px}
.si .character-thumb{padding-bottom:6px}
.si .character-thumb>.rarity.SUPPORTER{transform:translate(0,118px)}
.si.lp-grid>.chara-list{contain-intrinsic-size:auto 206px auto 164px}
.lp-top{position:fixed;right:18px;bottom:18px;z-index:50;width:46px;height:46px;padding:0;border:0;background:none;cursor:pointer}
.lp-top::before{content:'';position:absolute;inset:0;background:var(--acc);transform:skewX(-14deg);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.lp-top svg{position:relative;width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1180px){
  .lf-groups{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .lf-picks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lf-pick:last-child{grid-column:1/-1}
  .lf-groups .lf-seg{display:flex}
  .lf-groups .sg{flex:1 1 auto}
}
@media(max-width:700px){
  .lf-groups,.lf-picks{grid-template-columns:minmax(0,1fr)}
  .lp{padding:14px 12px 44px}
  .lp-head h1{font-size:25px}
  .lf{padding:12px}
  .lf-q{flex-basis:100%}
  .lf-sort{flex:1}
  .lf-sort select{flex:1}
  .lf-more{display:inline-block}
  .lf:not(.open) .lf-body{display:none}
  .lp-grid{gap:16px 0}
  .fc{height:36px;padding:0 9px}
  #f-rar .fc img{height:24px}
  #f-el .fc img{height:21px}
}
@media(max-width:436px){ .lp-grid{zoom:.92} }
@media(max-width:402px){ .lp-grid{zoom:.86} }
@media(max-width:378px){ .lp-grid{zoom:.82} }
@media(max-width:362px){ .lp-grid{zoom:.78} }
@media(max-width:345px){ .lp-grid{zoom:.7} }
@media(prefers-reduced-motion:reduce){ .fc,.sg,.fc::before,.sg::before{transition:none} }