/* Official v0.3.2 increment merged with this server visual rules; GPL-3.0-or-later. */
.lo {
  position: fixed;
  inset: 0px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  background: var(--bg-0);
  color: var(--text-hi);
  animation: lo-in 200ms var(--ease-out) backwards;
  overscroll-behavior: contain;
  --lo-detail-w: 7rem;
  --lo-gap-x: .22rem;
  --lo-pad-x: .3rem;
}

@keyframes lo-in {
  0% {
    opacity: 0;
  }
}

.lo__bg {
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background: radial-gradient(70% 90% at 18% 10%, rgba(78, 216, 175, 0.07), transparent 60%), radial-gradient(60% 70% at 100% 100%, rgba(52, 184, 216, 0.06), transparent 60%), linear-gradient(rgba(78, 216, 175, 0.035) 1px, transparent 1px) 0px 0px / 0.6rem 0.6rem, linear-gradient(90deg, rgba(78, 216, 175, 0.035) 1px, transparent 1px) 0px 0px / 0.6rem 0.6rem, linear-gradient(rgb(15, 19, 18), rgb(9, 11, 10));
}

.lo > :where(:not(.lo__bg)) {
  position: relative;
}

.lo-top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0px, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 0.2rem;
  height: max(1rem, 32px, calc(48px * var(--sp-ui, 1)));
  padding: 0px 0.36rem;
  background: linear-gradient(rgba(8, 10, 9, 0.95), rgba(10, 13, 12, 0.6));
  border-bottom: 1px solid var(--line);
}

.lo-top::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  right: 0.36rem;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
}

.lo-top__left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.14rem;
}

.lo-top__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02rem;
  min-width: 0px;
}

.lo-top__title {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin: 0px;
  font-size: max(0.32rem, 16px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.15;
}

.lo-top__icon {
  width: max(0.3rem, 16px);
  height: max(0.3rem, 16px);
  object-fit: contain;
  color: var(--mint-500);
}

.lo-top__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.16rem;
  min-width: 0px;
}

.lo-count {
  font-size: max(0.16rem, 11px);
  color: var(--text-lo);
  white-space: nowrap;
}

.lo-count b {
  color: var(--mint-400);
  font-size: max(0.22rem, 13px);
  margin: 0px 0.02rem 0px 0.06rem;
}

.lo-deadline {
  --cd-h: max(.44rem, 20px);
  flex: 0 0 auto;
}

.lo-deadline .countdown__label {
  font-size: max(0.11rem, 8px);
  width: min-content;
  word-break: keep-all;
  text-align: right;
}

.lo-sync {
  font-size: max(0.14rem, 10px);
  padding: 0.03rem 0.1rem;
  border: 1px solid var(--line-2);
  color: var(--text-lo);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.lo-sync.is-ok {
  color: var(--mint-400);
  border-color: var(--mint-800);
}

.lo-sync.is-busy {
  color: var(--text-md);
}

.lo-sync.is-warn {
  color: var(--amber);
  border-color: rgba(246, 163, 41, 0.45);
}

.lo-sync.is-bad {
  color: var(--red-premium);
  border-color: rgba(255, 84, 84, 0.45);
}

.lo-note {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.08rem;
  margin: 0px;
  padding: 0.07rem 0.36rem;
  font-size: max(0.15rem, 10px);
  color: var(--text-lo);
  background: linear-gradient(90deg, rgba(78, 216, 175, 0.08), transparent 70%);
  border-bottom: 1px solid rgba(47, 58, 53, 0.6);
}

.lo-note .icon {
  width: max(0.16rem, 11px);
  height: max(0.16rem, 11px);
  color: var(--mint-500);
  flex: 0 0 auto;
}

.lo-note.is-locked {
  color: var(--amber);
  background: linear-gradient(90deg, rgba(246, 163, 41, 0.12), transparent 70%);
}

.lo-note.is-locked .icon {
  color: var(--amber);
}

.lo-loading {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  color: var(--text-lo);
  font-size: max(0.18rem, 12px);
}

.lo-missing {
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.3rem;
  text-align: center;
  color: var(--amber);
}

.lo-missing .icon {
  width: max(0.32rem, 22px);
  height: max(0.32rem, 22px);
}

.lo-missing p {
  margin: 0px;
  max-width: 9rem;
  color: var(--text-lo);
  font-size: max(0.16rem, 11px);
  line-height: 1.6;
  text-wrap: balance;
}

.lo-body {
  flex: 1 1 auto;
  min-height: 0px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--lo-detail-w));
  gap: var(--lo-gap-x);
  padding: .18rem var(--lo-pad-x) .22rem;
}

.lo-roster {
  min-width: 0px;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.lo-detail-wrap {
  min-width: 0px;
  min-height: 0px;
  display: flex;
  flex-direction: column;
}

.lo-detail-back {
  display: none;
}

.lo-filters {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.lo-frow {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  flex-wrap: wrap;
  min-width: 0px;
}

.lo-chips {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  flex-wrap: wrap;
}

.lo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-width: max(0.46rem, 26px);
  height: max(0.4rem, 24px);
  padding: 0px 0.12rem;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.15rem, 11px);
  font-weight: 700;
  color: var(--text-lo);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  cursor: pointer;
  clip-path: polygon(0.07rem 0px, 100% 0px, calc(100% - 0.07rem) 100%, 0px 100%);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}

.lo-chip:hover {
  color: var(--text-hi);
  border-color: var(--line-3);
}

.lo-chip.is-on {
  color: var(--text-on-mint);
  background: var(--mint-500);
  border-color: var(--mint-400);
}

.lo-chip--tier .num {
  font-family: var(--font-num);
  font-size: max(0.17rem, 12px);
  letter-spacing: 0.04em;
}

.lo-chip--t1 {
  --tc: var(--tier-1);
}

.lo-chip--t2 {
  --tc: var(--tier-2);
}

.lo-chip--t3 {
  --tc: var(--tier-3);
}

.lo-chip--t4 {
  --tc: var(--tier-4);
}

.lo-chip--t5 {
  --tc: var(--tier-5);
}

.lo-chip--t6 {
  --tc: var(--tier-6);
}

.lo-chip--tier {
  color: var(--tc);
  box-shadow: inset 0 -2px 0 var(--tc);
}

.lo-chip--tier.is-on {
  color: rgb(11, 13, 12);
  background: var(--tc);
  border-color: var(--tc);
}

.lo-chip__icon {
  width: max(0.22rem, 14px);
  height: max(0.22rem, 14px);
  object-fit: contain;
}

.lo-profglyph {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.lo-chip:hover .lo-profglyph {
  opacity: 1;
}

.lo-chip.is-on .lo-profglyph {
  filter: none;
  mix-blend-mode: multiply;
  opacity: 1;
}

.lo-chip__lbl {
  font-size: max(0.14rem, 10px);
}

.lo-search {
  flex: 1 1 2.6rem;
  min-width: 2rem;
  max-width: 4.2rem;
  margin-left: auto;
}

.lo-select {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  height: max(0.4rem, 24px);
  padding-left: 0.1rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
}

.lo-select__k {
  font-size: max(0.13rem, 10px);
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.lo-select select {
  height: 100%;
  min-width: 1.6rem;
  padding: 0px 0.26rem 0px 0.06rem;
  border: 0px;
  outline: none;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.15rem, 11px);
  color: var(--text-hi);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234ed8af' d='M7 9l5 6 5-6z'/></svg>") right 0.04rem center / 0.2rem 0.2rem no-repeat transparent;
  appearance: none;
}

.lo-select select option {
  background: var(--bg-2);
  color: var(--text-hi);
}

.lo-select:focus-within {
  border-color: var(--mint-700);
}

.lo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.07rem;
  height: max(0.4rem, 24px);
  padding: 0px 0.12rem;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.15rem, 11px);
  color: var(--text-lo);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.lo-toggle__box {
  display: grid;
  place-items: center;
  width: max(0.2rem, 14px);
  height: max(0.2rem, 14px);
  border: 1px solid var(--line-3);
}

.lo-toggle__box .icon {
  width: 86%;
  height: 86%;
  opacity: 0;
  color: var(--text-on-mint);
}

.lo-toggle.is-on {
  color: var(--mint-400);
}

.lo-toggle.is-on .lo-toggle__box {
  background: var(--mint-500);
  border-color: var(--mint-400);
}

.lo-toggle.is-on .lo-toggle__box .icon {
  opacity: 1;
}

.lo-list {
  --q: max(.4rem, 32px);
  --qg: max(.05rem, 4px);
  --art: max(.52rem, 32px, calc(40px * var(--sp-ui, 1)));
  --cols: minmax(max(2.2rem, 32px, calc(110px * var(--sp-ui, 1))), max(3.2rem, 32px, calc(260px * var(--sp-ui, 1)))) calc(3 * var(--q) + 2 * var(--qg)) calc(4 * var(--q) + 3 * var(--qg)) max(2.2rem, 32px, calc(160px * var(--sp-ui, 1)));
  flex: 1 1 auto;
  min-height: 0px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0px 0.06rem 0.2rem 0px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.sp-coarse .lo-list {
  --q: max(.44rem, 32px, calc(40px * var(--sp-ui, 1)));
}

.lo-list__head, .lo .lo-card {
  display: grid;
  grid-template-columns: var(--cols);
  justify-content: start;
  align-items: center;
  column-gap: max(.12rem, calc(8px * var(--sp-ui, 1)));
}

.lo-list__head {
  position: sticky;
  top: 0px;
  z-index: 2;
  padding: 0.05rem 0.1rem 0.05rem 0.07rem;
  border-width: 1px 1px 1px 3px;
  border-style: solid;
  border-color: transparent;
  border-image: none;
  font-size: max(0.12rem, 9px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  background: linear-gradient(rgb(13, 17, 16) 70%, rgba(13, 17, 16, 0.85));
  box-shadow: inset 0 -1px 0 var(--line);
}

.lo-list__h small {
  margin-left: 0.05rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold-2);
  opacity: 0.8;
}

.lo-list__rows {
  display: flex;
  flex-direction: column;
  gap: max(.04rem, calc(3px * var(--sp-ui, 1)));
  padding-top: max(.05rem, calc(4px * var(--sp-ui, 1)));
}

.lo-empty {
  padding: 0.4rem;
  text-align: center;
  font-size: max(0.16rem, 11px);
}

.lo .lo-card {
  --tc: var(--tier-1);
  position: relative;
  min-width: 0px;
  padding: max(.05rem, calc(4px * var(--sp-ui, 1))) .1rem max(.05rem, calc(4px * var(--sp-ui, 1))) .07rem;
  background: rgba(255, 255, 255, 0.024);
  border-left: 3px solid var(--tc);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.lo-card--t1 {
  --tc: var(--tier-1);
}

.lo-card--t2 {
  --tc: var(--tier-2);
}

.lo-card--t3 {
  --tc: var(--tier-3);
}

.lo-card--t4 {
  --tc: var(--tier-4);
}

.lo-card--t5 {
  --tc: var(--tier-5);
}

.lo-card--t6 {
  --tc: var(--tier-6);
}

.lo .lo-card:hover {
  background: rgba(255, 255, 255, 0.043);
  border-left-color: var(--tc);
}

.lo .lo-card.is-sel {
  background: linear-gradient(90deg, rgba(78, 216, 175, 0.1), rgba(78, 216, 175, 0.02) 60%);
  border-left-color: var(--tc);
  box-shadow: 0 0 0 1px var(--mint-500) inset;
}

.lo-card button:focus-visible, .lo-card select:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 1px;
}

.lo-card__pick {
  display: flex;
  align-items: center;
  gap: max(.1rem, calc(6px * var(--sp-ui, 1)));
  min-width: 0px;
  padding: 0px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0px;
  cursor: pointer;
  touch-action: manipulation;
}

.lo-card__art {
  position: relative;
  flex: 0 0 auto;
  width: var(--art);
  height: var(--art);
  overflow: hidden;
  background: rgb(27, 32, 30);
  border: 1px solid var(--line-2);
}

.lo-card__art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lo-card__glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: max(0.24rem, 16px);
  font-weight: 900;
  color: var(--text-dim);
}

.lo-card__tier {
  position: absolute;
  left: 1px;
  top: 1px;
  z-index: 1;
  transform-origin: 0px 0px;
  transform: scale(0.8);
}

.lo-card__id {
  display: flex;
  flex-direction: column;
  gap: max(.03rem, calc(2px * var(--sp-ui, 1)));
  min-width: 0px;
}

.lo-card__name {
  font-size: max(0.17rem, 12px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lo-card__bonds {
  display: flex;
  flex-wrap: wrap;
  gap: max(.04rem, calc(3px * var(--sp-ui, 1)));
  min-height: max(0.16rem, 12px);
}

.lo-card__bond, .lo-card__bonds .lo-bond__dot {
  width: max(0.18rem, 13px);
  height: max(0.18rem, 13px);
  object-fit: contain;
}

.lo-card__flag {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1;
  width: max(0.16rem, 10px);
  height: max(0.16rem, 10px);
  background: linear-gradient(225deg, var(--mint-400) 50%, transparent 50%);
  pointer-events: none;
}

.lo-card__sub {
  align-self: flex-start;
  padding: 0px 0.04rem;
  font-size: max(0.11rem, 8px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ice-900);
  background: var(--ice);
}

.lo .lo-card.is-standin .lo-card__skills, .lo .lo-card.is-standin .lo-card__mods, .lo .lo-card.is-standin .lo-cult {
  opacity: 0.55;
}

.lo-locknote--standin {
  color: var(--ice);
}

.lo-card__skills, .lo-card__mods {
  display: flex;
  align-items: center;
  gap: var(--qg);
  min-width: 0px;
}

.lo-card__mods {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.lo-q {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--q);
  height: var(--q);
  padding: 0px;
  font: inherit;
  color: var(--text-lo);
  background: none;
  border: 0px;
  cursor: pointer;
  touch-action: manipulation;
}

.lo-q--empty {
  border: 1px dashed rgba(255, 255, 255, 0.07);
}

.lo-q:not(.is-on):not(.lo-q--empty) {
  opacity: 0.62;
}

.lo-q:not(.is-on):not(.lo-q--empty):hover {
  opacity: 1;
}

.lo-q__type {
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding: 0px 2px;
  font-size: max(0.11rem, 8px);
  line-height: 1.3;
  color: var(--text-hi);
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.lo-q--mod.is-on .lo-mglyph {
  border-color: var(--gold-2);
  box-shadow: rgba(255, 198, 0, 0.35) 0px 0px 0.08rem;
}

.lo-cult {
  display: flex;
  align-items: center;
  gap: max(.04rem, calc(3px * var(--sp-ui, 1)));
  min-width: 0px;
}

.lo .lo-cult .lo-select {
  min-height: 0px;
  height: max(0.32rem, 22px);
  padding-left: 0px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.03);
}

.lo .lo-cult .lo-select:hover, .lo .lo-cult .lo-select:focus-within {
  border-color: var(--line-3);
}

.lo .lo-cult .lo-select select {
  width: 100%;
  min-width: 0px;
  padding: 0 max(.2rem, calc(14px * var(--sp-ui, 1))) 0 max(.06rem, calc(4px * var(--sp-ui, 1)));
  font-size: max(0.14rem, 10px);
  color: var(--text-lo);
}

.lo-cult__pot {
  flex: 0 0 auto;
}

.lo-cult__tier {
  flex: 1 1 auto;
  min-width: 0px;
}

.lo .lo-cult .lo-select.is-off {
  border-color: var(--mint-700);
  background: rgba(78, 216, 175, 0.08);
}

.lo .lo-cult .lo-select.is-off select {
  color: var(--mint-400);
  font-weight: 700;
}

.sp-coarse .lo .lo-cult .lo-select {
  height: max(0.32rem, 28px);
}

.lo-sec--cult {
  padding: 0.08rem 0.1rem 0.1rem;
  margin-bottom: 0.14rem;
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid var(--mint-500);
}

.lo-sec--cult .lo-sec__head .lo-badge {
  margin-left: auto;
}

.lo-cult__row {
  display: grid;
  grid-template-columns: max(0.5rem, 30px) minmax(0px, 1fr);
  align-items: center;
  gap: 0.08rem;
}

.lo-cult__k {
  font-size: max(0.13rem, 10px);
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.lo .lo-cult__row .lo-seg {
  margin-left: 0px;
  flex-wrap: wrap;
  justify-self: start;
}

.lo-seg--pot button {
  min-width: max(0.36rem, 26px);
  font-family: var(--font-num);
}

.lo-seg--tier button {
  padding: 0px 0.1rem;
}

.lo-cult__eff {
  margin: 0.02rem 0px 0px;
  font-size: max(0.14rem, 10px);
  line-height: 1.5;
  color: var(--text-md);
}

.lo-cult__eff b {
  color: var(--mint-400);
  margin-right: 0.04rem;
}

.lo-cult__note {
  margin: 0px;
  font-size: max(0.12rem, 9px);
  line-height: 1.5;
  color: var(--text-dim);
}

.lo-sec--cult.is-moot .lo-cult__row, .lo-sec--cult.is-moot .lo-cult__eff {
  opacity: 0.55;
}

.lo-sec--cult.is-moot .lo-cult__note {
  color: var(--ice);
}

.lo-sicon {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 0.72rem;
  height: 0.72rem;
  background: rgb(21, 26, 24);
  border: 1px solid var(--line-2);
}

.lo-sicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lo-sicon--xs {
  width: max(0.2rem, 13px);
  height: max(0.2rem, 13px);
  border: 0px;
  background: transparent;
}

.lo-sicon--xs .lo-sicon__glyph {
  display: none;
}

.lo-sicon--md {
  width: max(.72rem, 32px, calc(38px * var(--sp-ui, 1)));
  height: max(.72rem, 32px, calc(38px * var(--sp-ui, 1)));
}

.lo-sicon--q {
  width: 86%;
  height: 86%;
}

.lo-sicon__glyph {
  font-family: var(--font-num);
  font-size: max(0.2rem, 12px);
  font-weight: 700;
  color: var(--text-lo);
  letter-spacing: 0.04em;
}

.lo-sicon.is-on {
  border-color: rgb(30, 160, 255);
}

.lo-sicon .lo-sicon__outline {
  position: absolute;
  inset: -0.05rem;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  width: calc(100% + 0.1rem) !important;
  height: calc(100% + 0.1rem) !important;
}

.lo-sicon__ring {
  position: absolute;
  inset: -0.05rem;
  border: 2px solid rgb(30, 160, 255);
  pointer-events: none;
}

.lo-mglyph {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: max(0.56rem, 30px);
  height: max(0.56rem, 30px);
  background: linear-gradient(rgb(42, 50, 47), rgb(21, 26, 24));
  border: 1px solid var(--line-3);
}

.lo-mglyph img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.lo-mglyph__t {
  font-family: var(--font-num);
  font-size: max(0.26rem, 15px);
  font-weight: 700;
  color: var(--gold-2);
  line-height: 1;
}

.lo-mglyph--none {
  background: rgb(18, 22, 21);
  border-style: dashed;
}

.lo-mglyph--q {
  width: 86%;
  height: 86%;
}

.lo-mglyph__slash {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
}

.lo-mglyph__slash::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10%;
  bottom: -10%;
  width: 2px;
  background: var(--text-dim);
  transform: translateX(-50%) rotate(45deg);
}

.lo-detail {
  --bk-c: var(--mint-500);
  flex: 1 1 auto;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(rgba(24, 30, 28, 0.97), rgba(10, 13, 12, 0.98));
  border: 1px solid var(--line-2);
  box-shadow: rgba(0, 0, 0, 0.45) 0px 0.14rem 0.4rem;
}

.lo-detail--empty {
  align-items: center;
  justify-content: center;
  font-size: max(0.16rem, 11px);
}

.lo-dhead {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: max(1.3rem, 32px, calc(60px * var(--sp-ui, 1))) minmax(0, 1fr);
  gap: 0.16rem;
  padding: 0.16rem 0.18rem 0.14rem;
  border-bottom: 1px solid var(--line);
}

.lo-dhead__art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.25;
  background: rgb(27, 32, 30);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 -3px 0 var(--tc, var(--tier-1));
}

.lo-dhead__art--t1 {
  --tc: var(--tier-1);
}

.lo-dhead__art--t2 {
  --tc: var(--tier-2);
}

.lo-dhead__art--t3 {
  --tc: var(--tier-3);
}

.lo-dhead__art--t4 {
  --tc: var(--tier-4);
}

.lo-dhead__art--t5 {
  --tc: var(--tier-5);
}

.lo-dhead__art--t6 {
  --tc: var(--tier-6);
}

.lo-dhead__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

.lo-dhead__art .uthumb {
  width: 100%;
  height: 100%;
}

.lo-dhead__info {
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

.lo-dhead__chips {
  display: flex;
  align-items: center;
  gap: 0.08rem;
}

.lo-dhead__name {
  margin: 0.02rem 0px 0px;
  font-size: max(0.34rem, 17px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.lo-dhead__en {
  font-family: var(--font-display);
  font-size: max(0.13rem, 9px);
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.lo-dhead__class {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  font-size: max(0.15rem, 10px);
  color: var(--text-md);
}

.lo-dhead__prof {
  width: max(0.2rem, 13px);
  height: max(0.2rem, 13px);
  object-fit: contain;
}

.lo-sep {
  width: 1px;
  height: 0.16rem;
  background: var(--line-3);
  margin: 0px 0.04rem;
}

.lo-dhead__bonds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.05rem;
  margin-top: 0.02rem;
}

.lo-bond {
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  padding: 0.01rem 0.08rem 0.01rem 0.04rem;
  font-size: max(0.13rem, 9px);
  color: var(--text-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.lo-bond__icon {
  width: max(0.18rem, 12px);
  height: max(0.18rem, 12px);
  object-fit: contain;
}

.lo-bond__dot {
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 50%;
  background: var(--mint-700);
}

.lo-dhead__reset {
  position: absolute;
  right: 0.12rem;
  top: 0.12rem;
}

.lo-detail__body {
  flex: 1 1 auto;
  min-height: 0px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.12rem 0.18rem 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.lo-garrisons {
  margin-bottom: 0.18rem;
}

.lo-garrisons .dgarrison__k {
  font-size: max(0.14rem, 11px);
}

.lo-garrisons .dgarrison__type {
  font-size: max(0.12rem, 10px);
}

.lo-garrisons .dgarrison__icon {
  width: max(0.18rem, 14px);
  height: max(0.18rem, 14px);
}

.lo-garrisons .dgarrison__text {
  font-size: max(0.15rem, 11px);
}

.lo-sec {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.lo-sec + .lo-sec {
  margin-top: 0.18rem;
}

.lo-sec__head {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  min-height: max(0.36rem, 22px);
}

.lo-sec__head h3 {
  display: flex;
  align-items: baseline;
  gap: 0.08rem;
  margin: 0px;
  font-size: max(0.2rem, 13px);
  font-weight: 900;
  letter-spacing: 0.1em;
}

.lo-sec__head h3::before {
  content: "";
  align-self: center;
  width: 0.05rem;
  height: 0.2rem;
  background: var(--mint-500);
}

.lo-sec__note {
  margin-left: auto;
  font-size: max(0.13rem, 9px);
  color: var(--text-dim);
}

.lo-sec__note b {
  color: var(--text-md);
}

.lo-seg {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--line-2);
}

.lo-seg button {
  height: max(0.32rem, 22px);
  padding: 0px 0.12rem;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.13rem, 10px);
  color: var(--text-lo);
  background: transparent;
  border: 0px;
  cursor: pointer;
  touch-action: manipulation;
}

.lo-seg button + button {
  border-left: 1px solid var(--line-2);
}

.lo-seg button.is-on {
  color: var(--text-on-mint);
  background: var(--mint-500);
}

.lo-seg button:disabled {
  opacity: 0.4;
  cursor: default;
}

.lo-skills {
  display: flex;
  flex-direction: column;
  gap: 0.07rem;
}

.lo-skill {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.14rem;
  width: 100%;
  padding: 0.1rem 0.12rem 0.1rem 0.16rem;
  font: inherit;
  color: var(--text-md);
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.024);
  border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}

.lo-skill:hover {
  border-color: var(--line-3);
  background: rgba(255, 255, 255, 0.04);
}

.lo-skill.is-on {
  color: var(--text-hi);
  background: linear-gradient(90deg, rgba(30, 160, 255, 0.13), rgba(30, 160, 255, 0.02) 70%);
  border-color: rgba(30, 160, 255, 0.55);
}

.lo-skill__deco {
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0.14rem;
  height: 0.17rem;
}

.lo-skill__deco img, .lo-skill__deco i {
  display: block;
  width: 100%;
  height: 100%;
}

.lo-skill__deco i {
  background: rgb(30, 160, 255);
  clip-path: polygon(0px 0px, 100% 50%, 0px 100%);
}

.lo-skill__body {
  flex: 1 1 0%;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.lo-skill__head {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  flex-wrap: wrap;
}

.lo-skill__slot {
  font-family: var(--font-num);
  font-size: max(0.13rem, 9px);
  font-weight: 700;
  color: var(--text-dim);
  padding: 0px 0.05rem;
  border: 1px solid var(--line-2);
  letter-spacing: 0.06em;
}

.lo-skill.is-on .lo-skill__slot {
  color: rgb(124, 200, 255);
  border-color: rgba(30, 160, 255, 0.55);
}

.lo-skill__name {
  font-size: max(0.19rem, 12px);
  font-weight: 700;
  color: var(--text-hi);
}

.lo-skill__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.06rem;
}

.lo-skill__desc {
  display: block;
  font-size: max(0.15rem, 10px);
  line-height: 1.55;
  color: var(--text-md);
}

.lo-sp {
  padding: 0.01rem 0.07rem;
  font-size: max(0.12rem, 9px);
  font-weight: 700;
  color: rgb(11, 13, 12);
  background: rgb(155, 210, 107);
}

.lo-sp--atk {
  background: rgb(255, 154, 60);
}

.lo-sp--def {
  background: rgb(245, 197, 66);
}

.lo-sp--passive {
  background: rgb(154, 164, 160);
}

.lo-tag {
  font-size: max(0.13rem, 9px);
  color: var(--text-lo);
}

.lo-tag b {
  color: var(--text-hi);
  font-family: var(--font-num);
  margin-left: 0.02rem;
}

.lo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.03rem;
  padding: 0.01rem 0.07rem;
  font-size: max(0.12rem, 9px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lo-badge .icon {
  width: 0.13rem;
  height: 0.13rem;
}

.lo-badge--def {
  color: var(--gold-2);
  border: 1px solid rgba(242, 189, 62, 0.55);
}

.lo-badge--on {
  color: rgb(11, 26, 38);
  background: rgb(30, 160, 255);
}

.lo-badge--changed {
  color: var(--text-on-mint);
  background: var(--mint-500);
}

.lo-badge--plain {
  color: var(--text-dim);
  border: 1px solid var(--line-2);
}

.lo-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.08rem;
}

.lo-mod {
  position: relative;
  flex: 1 1 1.9rem;
  min-width: 1.7rem;
  max-width: 3.2rem;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.08rem 0.12rem 0.08rem 0.08rem;
  font: inherit;
  color: var(--text-md);
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.024);
  border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}

.lo-mod:hover {
  border-color: var(--line-3);
}

.lo-mod.is-on {
  color: var(--text-hi);
  background: linear-gradient(90deg, rgba(242, 189, 62, 0.14), rgba(242, 189, 62, 0.02) 75%);
  border-color: rgba(242, 189, 62, 0.7);
}

.lo-mod.is-on .lo-mglyph {
  border-color: var(--gold-2);
  box-shadow: rgba(255, 198, 0, 0.35) 0px 0px 0.1rem;
}

.lo-mod__text {
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.01rem;
}

.lo-mod__type {
  font-family: var(--font-num);
  font-size: max(0.12rem, 9px);
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.lo-mod__name {
  font-size: max(0.16rem, 11px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lo-mod__def {
  position: absolute;
  right: 0.04rem;
  top: 0.04rem;
}

.lo-minfo {
  margin-top: 0.04rem;
  padding: 0.1rem 0.12rem;
  display: flex;
  flex-direction: column;
  gap: 0.07rem;
  background: rgba(0, 0, 0, 0.28);
  border-left: 3px solid var(--gold-2);
}

.lo-minfo--none {
  border-left-color: var(--line-3);
}

.lo-minfo__lead {
  margin: 0px;
  font-size: max(0.15rem, 10px);
  color: var(--text-lo);
}

.lo-minfo__title {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  font-size: max(0.17rem, 11px);
}

.lo-minfo__type {
  font-family: var(--font-num);
  font-size: max(0.13rem, 9px);
  color: var(--gold-2);
  letter-spacing: 0.1em;
}

.lo-minfo__icon {
  flex: 0 0 auto;
  width: max(0.26rem, 16px);
  height: max(0.26rem, 16px);
  object-fit: contain;
}

.lo-minfo__row {
  display: grid;
  grid-template-columns: max(0.5rem, 28px) minmax(0px, 1fr);
  gap: 0.08rem;
  align-items: baseline;
}

.lo-minfo__k {
  font-size: max(0.13rem, 9px);
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.lo-minfo__v {
  font-size: max(0.15rem, 10px);
  line-height: 1.55;
  color: var(--text-md);
}

.lo-minfo__tname {
  color: var(--text-hi);
  margin-right: 0.06rem;
}

.lo-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.06rem;
}

.lo-attr {
  display: inline-flex;
  align-items: baseline;
  gap: 0.04rem;
  padding: 0.01rem 0.08rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: max(0.13rem, 9px);
  color: var(--text-lo);
}

.lo-attr b {
  font-family: var(--font-num);
  font-size: max(0.15rem, 10px);
}

.lo-attr.is-up b {
  color: var(--mint-400);
}

.lo-attr.is-down b {
  color: var(--red-premium);
}

.lo-sec--stats .dstats-wrap {
  flex-wrap: wrap;
  gap: 0.1rem;
}

.lo-sec--stats .dstats-wrap > .dstats {
  flex: 1 1 max(3.2rem, 32px, calc(190px * var(--sp-ui, 1)));
}

.lo-sec--stats .dstat {
  padding: 0.05rem 0.08rem;
}

.lo-sec--stats .dstat__k {
  font-size: max(0.13rem, 9px);
}

.lo-sec--stats .dstat__v {
  font-size: max(0.2rem, 12px);
}

.lo-sec--stats .drange {
  min-width: max(1.1rem, 32px, calc(56px * var(--sp-ui, 1)));
}

.lo-sec--stats .rgrid {
  --rg: max(.14rem, 7px);
}

.lo-sec--stats .rgrid-all {
  font-size: max(0.16rem, 11px);
}

.lo-minfo--kit {
  margin-top: 0px;
  border-left-color: var(--mint-500);
}

.lo-stats__cap {
  margin: 0px;
  font-size: max(0.13rem, 9px);
  line-height: 1.5;
  color: var(--text-dim);
}

.lo-locknote {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  margin: 0.16rem 0px 0px;
  font-size: max(0.14rem, 10px);
  color: var(--amber);
}

.lo-locknote .icon {
  width: 0.16rem;
  height: 0.16rem;
}

.lo-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.04rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.lo-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.02rem 0.16rem;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.24rem, 13px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: var(--text-lo);
  background: transparent;
  border-width: 0px 0px 2px;
  border-style: none none solid;
  border-color: currentcolor currentcolor transparent;
  border-image: none;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.lo-tab .lo-top__icon {
  width: max(0.24rem, 14px);
  height: max(0.24rem, 14px);
}

.lo-tab:hover {
  color: var(--text-hi);
}

.lo-tab.is-on {
  color: var(--text-hi);
  border-bottom-color: var(--mint-500);
}

.lo-tab__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0px 0.3em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0px;
  color: var(--ice-900);
  background: var(--ice);
  border-radius: 1em;
}

.own {
  flex: 1 1 auto;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.16rem 0.3rem 0.2rem;
}

.own__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.own__lead {
  flex: 1 1 0%;
  margin: 0px;
  font-size: max(0.15rem, 10px);
  line-height: 1.5;
  color: var(--text-md);
}

.own__lead b {
  color: var(--ice);
  font-weight: 700;
}

.own__list {
  flex: 1 1 auto;
  min-height: 0px;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0px 0.06rem 0.2rem 0px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.own-tier__head {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  margin: 0px 0px 0.08rem;
  font-size: max(0.17rem, 12px);
  font-weight: 700;
  color: var(--text-md);
  letter-spacing: 0.06em;
}

.own-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(4.4rem, 32px, calc(270px * var(--sp-ui, 1))), 1fr));
  gap: 0.08rem;
}

.own-card {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr) auto;
  align-items: center;
  gap: 0.08rem;
  min-width: 0px;
  padding: 0.07rem 0.1rem 0.07rem 0.07rem;
  font: inherit;
  color: var(--text-hi);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--tc, var(--line-3));
  transition: background var(--t-fast), border-color var(--t-fast);
}

.own-card--t1 {
  --tc: var(--tier-1);
}

.own-card--t2 {
  --tc: var(--tier-2);
}

.own-card--t3 {
  --tc: var(--tier-3);
}

.own-card--t4 {
  --tc: var(--tier-4);
}

.own-card--t5 {
  --tc: var(--tier-5);
}

.own-card--t6 {
  --tc: var(--tier-6);
}

.own-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-3);
}

.own-card__op, .own-card__sub {
  display: flex;
  align-items: center;
  gap: 0.07rem;
  min-width: 0px;
}

.own-card__ava {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: max(0.46rem, 28px);
  height: max(0.46rem, 28px);
  overflow: hidden;
  background: rgb(10, 13, 12);
  border: 1px solid var(--line-2);
}

.own-card__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.own-card__ava b {
  font-size: max(0.18rem, 12px);
  color: var(--text-lo);
}

.own-card__txt {
  display: flex;
  flex-direction: column;
  min-width: 0px;
}

.own-card__name {
  font-size: max(0.16rem, 11px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.own-card__txt small {
  font-size: max(0.12rem, 9px);
  color: var(--text-lo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.own-card__arrow .icon {
  width: max(0.18rem, 12px);
  height: max(0.18rem, 12px);
  color: var(--text-dim);
}

.own-card__sub {
  opacity: 0.55;
}

.own-card__state {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.03rem;
  min-width: max(0.5rem, 30px);
  font-size: max(0.12rem, 9px);
  font-weight: 700;
  color: var(--mint-400);
  white-space: nowrap;
}

.own-switch {
  position: relative;
  display: inline-block;
  width: max(0.36rem, 24px);
  height: max(0.2rem, 13px);
  border-radius: 1em;
  background: var(--mint-700);
}

.own-switch > i {
  position: absolute;
  top: 2px;
  right: 2px;
  width: calc(-4px + max(0.2rem, 13px));
  height: calc(-4px + max(0.2rem, 13px));
  border-radius: 50%;
  background: rgb(255, 255, 255);
  transition: right var(--t-fast), left var(--t-fast);
}

.own-card.is-off {
  background: rgba(159, 212, 255, 0.07);
  border-color: rgba(159, 212, 255, 0.35);
}

.own-card.is-off .own-card__op {
  opacity: 0.5;
  filter: grayscale(0.8);
}

.own-card.is-off .own-card__sub {
  opacity: 1;
}

.own-card.is-off .own-card__sub .own-card__ava {
  border-color: var(--ice);
}

.own-card.is-off .own-card__state {
  color: var(--ice);
}

.own-card.is-off .own-switch {
  background: var(--bg-4);
}

.own-card.is-off .own-switch > i {
  right: auto;
  left: 2px;
  background: var(--ice);
}

@media (max-width: 760px) {
  .own {
    padding: 0.1rem 0.16rem 0.16rem;
  }

  .own__lead {
    display: none;
  }
}

.diy {
  position: relative;
  flex: 1 1 auto;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.16rem 0.3rem 0.2rem;
}

.diy__body {
  flex: 1 1 auto;
  min-height: 0px;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0px 0.06rem 0.2rem 0px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.diy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(5.2rem, 32px, calc(300px * var(--sp-ui, 1))), 1fr));
  gap: 0.1rem;
}

.diy-slot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0px, 1fr) auto;
  gap: 0.1rem;
  align-items: start;
  min-width: 0px;
  padding: 0.08rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--tc, var(--line-3));
}

.diy-slot--t5 {
  --tc: var(--tier-5);
}

.diy-slot--t6 {
  --tc: var(--tier-6);
}

.diy-slot.is-empty {
  display: flex;
  flex-direction: column;
  padding: 0px;
  border-style: dashed dashed dashed solid;
}

.diy-slot__fill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 100%;
  min-height: max(1.3rem, 32px, calc(84px * var(--sp-ui, 1)));
  padding: 0.1rem;
  font: inherit;
  color: var(--text-md);
  background: none;
  border: 0px;
  cursor: pointer;
  touch-action: manipulation;
}

.diy-slot__fill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-hi);
}

.diy-slot__fill b {
  font-size: max(calc(.16 * var(--t)), 11px);
}

.diy-slot__fill small {
  font-size: max(calc(.12 * var(--t)), 9px);
  color: var(--text-lo);
}

.diy-slot__plus {
  display: grid;
  place-items: center;
  width: max(0.4rem, 26px);
  height: max(0.4rem, 26px);
  border: 1px solid var(--line-3);
  border-radius: 50%;
}

.diy-slot__plus .icon {
  width: 60%;
  height: 60%;
}

.diy-slot__art {
  display: grid;
  place-items: center;
  width: max(.9rem, 32px, calc(56px * var(--sp-ui, 1)));
  height: max(1.3rem, 32px, calc(84px * var(--sp-ui, 1)));
  overflow: hidden;
  background: rgb(10, 13, 12);
  border: 1px solid var(--line-2);
}

.diy-slot__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.diy-slot__art b {
  font-size: max(calc(.3 * var(--t)), 18px);
  color: var(--text-lo);
}

.diy-slot__body {
  display: flex;
  flex-direction: column;
  gap: 0.03rem;
  min-width: 0px;
}

.diy-slot__head {
  display: flex;
  align-items: center;
  gap: 0.05rem;
}

.diy-slot__label {
  font-size: max(calc(.12 * var(--t)), 9px);
  color: var(--text-lo);
  letter-spacing: 0.06em;
}

.diy-slot__name {
  font-size: max(calc(.17 * var(--t)), 12px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diy-slot__class {
  font-size: max(calc(.12 * var(--t)), 9px);
  color: var(--text-lo);
}

.diy-slot__kit {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  min-width: 0px;
  font-size: max(calc(.13 * var(--t)), 9px);
  color: var(--text-md);
}

.diy-slot__kit > span {
  min-width: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diy-slot__sicon, .diy-slot__micon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: max(0.24rem, 16px);
  height: max(0.24rem, 16px);
  object-fit: contain;
  font-size: 0.8em;
  color: var(--text-lo);
}

.diy-slot__micon--none {
  border: 1px solid var(--line-2);
}

.diy-slot__acts {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

.diy-slot__cult {
  display: block;
  margin-top: 0.03rem;
  font-size: max(calc(.12 * var(--t)), 9px);
}

.diy-slot__cult .lo-cult {
  max-width: max(2.6rem, calc(200px * var(--sp-ui, 1)));
}

.diy-slot__bad {
  display: flex;
  align-items: center;
  gap: 0.04rem;
  margin: 0.02rem 0px 0px;
  font-size: max(calc(.12 * var(--t)), 9px);
  color: var(--amber);
}

.diy-slot.is-bad {
  border-color: rgba(255, 196, 0, 0.45);
}

.diy-tag {
  display: inline-flex;
  align-items: center;
  height: 1.5em;
  padding: 0px 0.4em;
  font-size: max(calc(.11 * var(--t)), 8px);
  font-weight: 700;
  border-radius: 1em;
  white-space: nowrap;
}

.diy-tag--proto {
  color: var(--ice-900);
  background: var(--ice);
}

.diy-tag--own {
  color: var(--text-on-mint);
  background: var(--mint-500);
}

.diy-bonds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.03rem 0.06rem;
}

.diy-bond {
  display: inline-flex;
  align-items: center;
  gap: 0.03rem;
  font-size: max(calc(.12 * var(--t)), 9px);
  color: var(--text-md);
}

.diy-bond .bglyph, .diy-bond img {
  width: max(0.16rem, 11px);
  height: max(0.16rem, 11px);
}

.diy-pick {
  position: absolute;
  inset: 0px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: .12rem var(--lo-pad-x) .14rem;
  background: var(--bg-1, #0d1110);
}

.diy-pick__head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  font-size: max(calc(.16 * var(--t)), 11px);
}

.diy-pick__note {
  flex: 1 1 0%;
  min-width: 0px;
  font-size: max(calc(.12 * var(--t)), 9px);
  color: var(--text-lo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diy-pick__x {
  display: grid;
  place-items: center;
  width: max(0.4rem, 28px);
  height: max(0.4rem, 28px);
  color: var(--text-md);
  background: none;
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.diy-pick__main {
  flex: 1 1 auto;
  min-height: 0px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--lo-detail-w));
  gap: var(--lo-gap-x);
}

.diy-pick__list {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.06rem;
}

.diy-opt.is-sel {
  border-color: var(--mint-500);
  background: rgba(52, 211, 153, 0.08);
}

.diy-opt.is-taken {
  opacity: 0.45;
  cursor: not-allowed;
}

.diy-opt__class {
  display: inline-flex;
  align-items: center;
  gap: 0.03rem;
  font-size: max(calc(.11 * var(--t)), 8px);
  color: var(--text-lo);
}

.diy-opt__prof {
  width: max(0.14rem, 10px);
  height: max(0.14rem, 10px);
}

.diy-opt__taken {
  font-size: max(calc(.1 * var(--t)), 8px);
  color: var(--amber);
}

.diy-pick__detail {
  flex: 1 1 auto;
  min-height: 0px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.12rem 0.18rem 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.diy-pick__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.08rem;
}

.lo-entry__diy {
  color: var(--text-on-mint);
  background: var(--mint-500);
}

@media (max-width: 760px) {
  .diy {
    padding: 0.1rem 0.16rem 0.16rem;
  }

  .diy-pick {
    padding: .08rem var(--lo-pad-x) .1rem;
  }

  .diy-slot {
    grid-template-columns: auto minmax(0px, 1fr);
  }

  .diy-slot__acts {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
}

.lo-entry {
  position: relative;
  gap: 0.08rem;
}

.lo-entry__icon {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  flex: 0 0 auto;
}

.lo-entry__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0px 0.3em;
  margin-left: 0.02rem;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text-on-mint);
  background: var(--mint-500);
  border-radius: 1em;
}

.lo-entry__own {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  height: 1.5em;
  padding: 0px 0.4em;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--ice-900);
  background: var(--ice);
  border-radius: 1em;
  white-space: nowrap;
}

.countdown[aria-label="无倒计时"] {
  display: none;
}

.sp-loadout-open .app-root > .screen {
  visibility: hidden;
}

@media (max-width: 1200px) {
  .lo-tab {
    padding: 0.02rem 0.08rem;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 1100px) {
  .lo {
    --lo-detail-w: 6.4rem;
    --lo-gap-x: .16rem;
    --lo-pad-x: .2rem;
  }

  .lo-body {
    padding: .12rem var(--lo-pad-x) .16rem;
  }

  .lo-chip__lbl {
    display: none;
  }

  .lo-deadline ~ .lo-sync, .lo-deadline ~ .lo-count {
    display: none;
  }
}

@media (max-width: 1000px) {
  .lo-count, .lo-sync {
    display: none;
  }

  .lo-top .btn__icon + .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    white-space: nowrap;
    border: 0px;
  }
}

@media (max-width: 760px) {
  .lo-top {
    padding: 0px 0.16rem;
  }
}

@media (max-width: 1000px) {
  .lo-body {
    grid-template-columns: minmax(0px, 1fr);
  }

  .lo-detail-wrap {
    display: none;
  }

  .lo-body.is-detail .lo-roster {
    display: none;
  }

  .lo-body.is-detail .lo-detail-wrap {
    display: flex;
  }

  .lo-detail-back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.04rem;
    margin-bottom: 0.08rem;
    padding: 0.04rem 0.12rem 0.04rem 0.04rem;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    line-height: inherit;
    font-family: inherit;
    font-optical-sizing: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-language-override: inherit;
    font-size: max(calc(.15 * var(--t)), 11px);
    color: var(--mint-400);
    background: transparent;
    border: 1px solid var(--mint-800);
    cursor: pointer;
  }

  .lo-detail-back .icon {
    width: 0.2rem;
    height: 0.2rem;
  }

  .diy-pick__main {
    grid-template-columns: minmax(0px, 1fr);
  }

  .diy-pick__main.is-detail .diy-pick__col {
    display: none;
  }

  .diy-pick__main.is-detail > .lo-detail-wrap {
    display: flex;
  }
}

@media (max-width: 700px) {
  .lo-card__bonds {
    display: none;
  }
}

@media (max-height: 520px) {
  .lo-note {
    display: none;
  }

  .lo-dhead {
    grid-template-columns: max(1rem, 32px, calc(48px * var(--sp-ui, 1))) minmax(0, 1fr);
    padding: 0.1rem 0.14rem;
  }

  .lo-dhead__en {
    display: none;
  }
}

.lo .lo-back {
  height: max(0.5rem, 32px);
  padding: 0 max(.2rem, calc(10px * var(--sp-ui, 1))) 0 max(.12rem, calc(6px * var(--sp-ui, 1)));
  font-size: max(calc(.18 * var(--t)), 12px);
}

.lo .lo-top__right .btn, .lo .lo-dhead__reset {
  height: max(0.36rem, 28px);
  padding: 0 max(.16rem, calc(8px * var(--sp-ui, 1)));
  font-size: max(calc(.15 * var(--t)), 11px);
}

.lo .lo-search .field__box {
  height: max(0.56rem, 28px);
  padding: 0 max(.16rem, calc(6px * var(--sp-ui, 1)));
}

.lo .lo-search .field__input {
  font-size: max(calc(.2 * var(--t)), 12px);
}

.lo .lo-search .field__icon {
  width: max(0.22rem, 14px);
  height: max(0.22rem, 14px);
}

.sp-coarse .lo-chip, .sp-coarse .lo-toggle, .sp-coarse .lo-select {
  min-height: 30px;
}

.sp-coarse .lo-seg button {
  min-height: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .lo, .lo .lo-card {
    animation: auto ease 0s 1 normal none running none;
    transition: none;
  }
}

.lo-io__hint {
  margin: 0 0 max(.1rem, calc(8px * var(--sp-ui, 1)));
  font-size: max(calc(.18 * var(--t)), 12px);
  line-height: 1.55;
  color: var(--text-md);
}

.lo-io__hint b {
  color: var(--mint-400);
  font-size: max(calc(.22 * var(--t)), 13px);
  margin: 0px 0.02rem;
}

.lo-io__hint strong {
  color: var(--gold);
}

.lo-io__text {
  box-sizing: border-box;
  width: 100%;
  height: max(2.4rem, 32px, calc(160px * var(--sp-ui, 1)));
  min-height: 120px;
  resize: vertical;
  padding: max(.1rem, calc(8px * var(--sp-ui, 1))) max(.12rem, calc(10px * var(--sp-ui, 1)));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: max(calc(.2 * var(--t)), 16px);
  line-height: 1.45;
  color: var(--text-hi);
  background: rgba(4, 10, 8, 0.55);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
}

.lo-io__text:focus {
  border-color: var(--mint-700);
}

.lo-io__text::placeholder {
  color: var(--text-lo);
}

.lo-io__file {
  display: none;
}

.lo-voice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.12rem;
  padding: 0.14rem 0px;
  font-size: calc(.18 * var(--t));
}

.lo-voice > small {
  flex-basis: 100%;
  color: var(--text-dim);
  font-size: calc(.15 * var(--t));
}

.lo-voice .lo-select {
  min-width: 1.6rem;
  max-width: 100%;
}

.lo-voice__preview {
  height: max(0.4rem, 24px);
  padding: 0px 0.12rem;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.15rem, 11px);
  color: var(--mint-400);
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.lo-voice__preview:hover, .lo-voice__preview:focus-visible {
  border-color: var(--mint-700);
}

.lo-skins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(0.92rem, 92px), 1fr));
  gap: 0.1rem;
}

.lo-skin {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
  min-width: 0px;
  padding: 0.1rem;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-hi);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms, transform 150ms;
}

.lo-skin:hover:not(:disabled) {
  border-color: var(--mint-500);
}

.lo-skin:active:not(:disabled) {
  transform: scale(0.98);
}

.lo-skin:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 2px;
}

.lo-skin.is-on {
  border-color: var(--mint-400);
  background: var(--bg-2);
}

.lo-skin:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lo-skin__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: max(1.24rem, 110px);
  overflow: hidden;
}

.lo-skin__art img {
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
}

.lo-skin__name {
  font-size: max(0.16rem, 12px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lo-skin__brand {
  font-size: max(0.12rem, 10px);
  color: var(--text-lo);
  overflow-wrap: anywhere;
}

.lo-skin__mark {
  display: flex;
  align-items: center;
  gap: 0.03rem;
  color: var(--mint-400);
  font-size: max(0.12rem, 10px);
}

.lo-skin__mark .icon {
  width: max(0.12rem, 12px);
  height: max(0.12rem, 12px);
}

.lo-skin__note {
  color: var(--text-lo);
  font-size: max(0.13rem, 11px);
  line-height: 1.6;
  margin: 0.12rem 0px 0px;
  overflow-wrap: anywhere;
}

.lo-skin-sync {
  color: var(--text-lo);
  font-size: max(0.12rem, 10px);
}

.lo-skin-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lo-skin-preview img {
  max-width: 100%;
  max-height: 65dvh;
  object-fit: contain;
}

.lo-skin__dynamic {
  font-size: max(0.12rem, 10px);
  color: var(--mint-400);
}

.lo-dynamic__stage {
  position: relative;
  width: 100%;
  height: min(60dvh, 560px);
  min-height: 200px;
}

.lo-dynamic__canvas {
  position: absolute;
  inset: 0px;
}

.lo-dynamic__canvas canvas {
  display: block;
  max-width: 100%;
}

.lo-dynamic__fallback {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lo-dynamic__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.12rem;
  font-size: max(0.14rem, 12px);
  color: var(--text-lo);
}

.lo-dynamic__controls select {
  max-width: 100%;
  background: var(--bg-1);
  color: var(--text-hi);
  border: 1px solid var(--line);
  min-height: 36px;
}

.lo-dynamic-switch {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.08rem;
}

.lo-skin__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.08rem;
  margin-top: 0.08rem;
}

.lo-skin__error {
  color: var(--red-400, #ef8f8f);
  font-size: max(0.16rem, 12px);
}

@media (pointer: coarse) {
  .lo-skin__tools .btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lo-skin {
    transition: none;
  }

  .lo-drawer, .lo-op__quick, .lo-pop {
    animation: auto ease 0s 1 normal none running none;
  }

  .lo-op__card {
    transition: none;
  }
}

.lo-preset-io {
  width: 560px;
  max-width: calc(-32px + 100vw);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.lo-preset-io .modal__actions {
  flex-wrap: wrap;
  gap: 8px;
}

.lo-preset-io .modal__actions .btn {
  min-height: 44px;
  padding-inline: 14px;
  font-size: 14px;
}

.lo-preset-io .lo-io__text {
  height: 160px;
  min-height: 120px;
}

.sp-coarse .lo [data-preset-action] {
  min-height: 44px;
  font-size: 14px;
}

@media (max-height: 520px) {
  .lo-preset-io .lo-io__text {
    height: 120px;
  }

  .lo-deck {
    padding-top: 0.12rem;
    padding-bottom: 0.1rem;
    gap: 0.2rem;
  }

  .lo-tgrid {
    gap: 0.1rem;
  }

  .lo-diy__frame {
    width: 46%;
  }

  .lo-diy__n {
    font-size: min(max(calc(.3 * var(--t)), 16px), max(16px, calc(16px + var(--t-step))));
  }

  .lo-diy__n b {
    font-size: min(max(calc(.4 * var(--t)), 20px), max(20px, calc(20px + var(--t-step))));
  }
}

@media (max-width: 900px) {
  .lo-skins {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
}

.lo-open .community-chat {
  visibility: hidden;
}

.lo--deck {
  --drawer-w: min(6.4rem, 92vw);
  --opw: max(2.1rem, 100px);
  --rail: max(.44rem, 22px);
  --qw: max(.9rem, 48px);
  --qcw: max(1.56rem, 104px);
  --itw: max(4.3rem, 230px);
}

.lo--deck .lo__bg {
  background: radial-gradient(60% 80% at 12% 0%, rgba(78, 216, 175, 0.05), transparent 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0px, rgba(255, 255, 255, 0.024) 1px, transparent 1px, transparent 1.2rem), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 1.2rem), linear-gradient(rgb(22, 25, 24), rgb(12, 14, 13) 70%, rgb(9, 11, 10));
}

.lo-top--deck {
  grid-template-columns: minmax(max-content, 1fr) minmax(0px, auto) minmax(max-content, 1fr);
  z-index: 6;
}

.lo-info {
  display: grid;
  place-items: center;
  width: max(0.5rem, 32px);
  height: max(0.5rem, 32px);
  padding: 0px;
  color: var(--text-hi);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.lo-info:hover {
  border-color: var(--mint-500);
  color: var(--mint-400);
}

.lo-info .icon {
  width: 56%;
  height: 56%;
}

.lo-top__note {
  margin: 0px;
  max-width: 8.4rem;
  font-size: max(0.15rem, 10px);
  color: var(--text-lo);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lo-top__note.is-locked {
  color: var(--amber);
}

.lo-tbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  height: max(0.4rem, 28px);
  padding: 0px max(0.14rem, 8px);
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.15rem, 11px);
  font-weight: 700;
  color: var(--text-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  cursor: pointer;
  white-space: nowrap;
}

.lo-tbtn:hover, .lo-tbtn.is-on {
  color: var(--text-hi);
  border-color: var(--mint-700);
}

.lo-tbtn .icon {
  width: max(0.18rem, 12px);
  height: max(0.18rem, 12px);
}

.lo-tbtn__n {
  min-width: max(0.2rem, 14px);
  padding: 0px 3px;
  font-size: max(0.12rem, 9px);
  text-align: center;
  color: rgb(4, 20, 15);
  background: var(--mint-500);
}

.lo-popwrap {
  position: relative;
}

.lo-pop {
  position: absolute;
  top: calc(100% + 0.08rem);
  right: 0px;
  z-index: 20;
  padding: 0.14rem;
  background: linear-gradient(rgb(29, 35, 33), rgb(18, 22, 21));
  border: 1px solid var(--line-2);
  box-shadow: rgba(0, 0, 0, 0.6) 0px 0.14rem 0.4rem;
  animation: lo-in 140ms var(--ease-out) backwards;
}

.lo-pop--filter {
  width: min(9.4rem, -24px + 100vw);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.lo-pop__row {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding-top: 0.1rem;
  border-top: 1px solid var(--line);
}

.lo-pop__k {
  font-size: max(0.14rem, 10px);
  color: var(--text-dim);
}

.lo-pop__row .lo-seg {
  margin: 0px;
}

.lo-pop__row .lo-tbtn {
  margin-left: auto;
}

.lo-pop--menu {
  display: flex;
  flex-direction: column;
  min-width: max(2.4rem, 150px);
  padding: 0.06rem;
}

.lo-pop--menu button {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  height: max(0.44rem, 32px);
  padding: 0px 0.14rem;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.16rem, 12px);
  color: var(--text-md);
  background: none;
  border: 0px;
  text-align: left;
  cursor: pointer;
}

.lo-pop--menu button:hover:not(:disabled) {
  color: var(--text-hi);
  background: rgba(78, 216, 175, 0.1);
}

.lo-pop--menu button:disabled {
  opacity: 0.4;
  cursor: default;
}

.lo-pop--menu button.is-danger:hover:not(:disabled) {
  color: var(--red-premium);
  background: rgba(255, 84, 84, 0.1);
}

.lo-pop--menu .icon {
  width: max(0.18rem, 12px);
  height: max(0.18rem, 12px);
}

.lo-assist, .lo-quickbtn {
  display: inline-flex;
  align-items: stretch;
  height: max(0.7rem, 40px);
  padding: 0px;
  font: inherit;
  border: 0px;
  cursor: pointer;
  text-align: left;
}

.lo-assist__txt, .lo-quickbtn__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px max(0.14rem, 8px);
  line-height: 1.1;
}

.lo-assist__icon, .lo-quickbtn__icon {
  display: grid;
  place-items: center;
  width: max(0.62rem, 34px);
}

.lo-assist__icon .icon, .lo-quickbtn__icon .icon {
  width: 58%;
  height: 58%;
}

.lo-assist {
  color: rgb(5, 33, 25);
  background: var(--mint-500);
}

.lo-assist:hover {
  background: var(--mint-400);
}

.lo-assist__k {
  font-size: max(0.15rem, 11px);
  font-weight: 700;
}

.lo-assist__v {
  font-size: max(0.22rem, 13px);
  font-weight: 800;
}

.lo-assist__icon {
  margin: 0.06rem 0.06rem 0.06rem 0px;
  color: var(--mint-400);
  background: rgb(11, 29, 24);
}

.lo-quickbtn {
  color: rgb(17, 22, 20);
  background: rgb(238, 241, 239);
}

.lo-quickbtn:hover:not(:disabled) {
  background: rgb(255, 255, 255);
}

.lo-quickbtn:disabled {
  opacity: 0.45;
  cursor: default;
}

.lo-quickbtn__txt > span {
  font-size: max(0.2rem, 13px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.lo-quickbtn__txt small {
  font-family: var(--font-display);
  font-size: max(0.09rem, 7px);
  letter-spacing: 0.14em;
  color: rgb(139, 147, 143);
}

.lo-quickbtn__icon {
  margin: 0.06rem 0.06rem 0.06rem 0px;
  color: rgb(238, 241, 239);
  background: rgb(26, 31, 29);
}

.lo-qbar__k {
  font-size: max(0.15rem, 11px);
  color: var(--text-lo);
  white-space: nowrap;
}

.lo-qseg {
  display: inline-flex;
  padding: 3px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}

.lo-qseg button {
  height: max(0.4rem, 28px);
  padding: 0px max(0.2rem, 12px);
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.16rem, 12px);
  font-weight: 800;
  color: var(--text-md);
  background: none;
  border: 0px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.lo-qseg button.is-on {
  color: rgb(17, 22, 20);
  background: rgb(238, 241, 239);
}

.lo-deckwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0px;
  display: flex;
}

.lo-deck {
  position: relative;
  flex: 1 1 auto;
  min-width: 0px;
  display: flex;
  align-items: stretch;
  gap: 0.34rem;
  padding: 0.24rem 0.36rem 0.2rem;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.lo-deck.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.lo-deck.is-dragging * {
  cursor: grabbing !important;
}

.lo-deck--empty {
  align-items: center;
  justify-content: center;
}

.lo-deck.has-drawer {
  padding-left: calc(var(--drawer-w) + .3rem);
  scroll-padding-left: calc(var(--drawer-w) + .2rem);
}

.lo-tgroup {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0.18rem;
}

.lo-tmark {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  width: max(0.86rem, 44px);
  padding: 0.12rem 0px 0.14rem;
  overflow: hidden;
  background: linear-gradient(rgb(42, 47, 45), rgb(21, 25, 24) 60%, rgb(16, 19, 18));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 3px 0 var(--tc), 0 .06rem .2rem rgba(0, 0, 0, .4);
  min-height: 0px;
}

.lo-tmark__no {
  font-family: var(--font-display);
  font-size: max(0.1rem, 8px);
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.lo-tmark__n {
  display: grid;
  place-items: center;
  width: 76%;
  aspect-ratio: 1 / 1.3;
  font-family: var(--font-num);
  font-size: max(0.38rem, 20px);
  font-weight: 900;
  line-height: 1;
  color: var(--tc);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.35);
}

.lo-tmark__cnt {
  margin-top: auto;
  font-size: max(0.15rem, 10px);
  color: var(--text-lo);
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: max(.08rem, calc(4px * var(--sp-ui, 1)));
  text-align: center;
}

.lo-tmark::after {
  content: "RHODES ISLAND · OPERATOR DISPATCH";
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: max(0.09rem, 7px);
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.lo-tgrid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0px, 1fr));
  grid-auto-columns: max-content;
  gap: 0.16rem 0.14rem;
  min-height: 0px;
}

.lo-op {
  --tc: var(--tier-1);
  position: relative;
  display: flex;
  min-height: 0px;
}

.lo-op--t2 {
  --tc: var(--tier-2);
}

.lo-op--t3 {
  --tc: var(--tier-3);
}

.lo-op--t4 {
  --tc: var(--tier-4);
}

.lo-op--t5 {
  --tc: var(--tier-5);
}

.lo-op--t6 {
  --tc: var(--tier-6);
}

.lo-op__card {
  position: relative;
  width: var(--opw);
  min-height: 0px;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: minmax(0px, 1fr) auto auto;
  column-gap: max(0.05rem, 3px);
  padding: max(0.06rem, 3px) max(0.06rem, 3px) max(0.07rem, 4px);
  background: linear-gradient(rgba(44, 50, 48, 0.94), rgba(24, 28, 27, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: rgba(0, 0, 0, 0.45) 0px 0.05rem 0.16rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
}

.lo-op:hover .lo-op__card {
  border-color: rgba(255, 255, 255, 0.22);
}

.lo-op.is-sel .lo-op__card {
  border-color: var(--mint-400);
  box-shadow: 0 0 0 1px var(--mint-400), 0 0 .18rem rgba(89, 244, 202, .3);
}

.lo-op__rail {
  grid-area: 1 / 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(0.08rem, 4px);
  padding-top: 2px;
}

.lo-op__tier.tier {
  width: 100%;
  --tier-h: var(--rail);
  height: var(--tier-h);
}

.lo-op__lv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(0.05rem, 3px);
  width: 86%;
  margin-top: max(0.07rem, 5px);
  padding: max(0.06rem, 3px) 0px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.lo-op__lvrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: max(.02rem, calc(1px * var(--sp-ui, 1)));
}

.lo-op__lvrow b {
  font-size: max(0.15rem, 10px);
  color: var(--text-md);
}

.lo-op__lvrow.is-elite b {
  color: var(--gold-2);
}

.lo-op__chev {
  width: max(0.18rem, 11px);
  height: max(0.12rem, 7px);
  background: currentcolor;
  color: var(--text-lo);
  clip-path: polygon(0px 40%, 50% 0px, 100% 40%, 100% 62%, 50% 22%, 0px 62%, 0px 100%, 50% 60%, 100% 100%, 100% 78%, 50% 38%, 0px 78%);
}

.lo-op__lvrow.is-elite .lo-op__chev {
  color: var(--gold-2);
}

.lo-op__chev.is-e1 {
  clip-path: polygon(0px 62%, 50% 22%, 100% 62%, 100% 84%, 50% 44%, 0px 84%);
}

.lo-op__mark {
  width: max(0.12rem, 8px);
  height: max(0.12rem, 8px);
  margin-top: auto;
  background: var(--mint-400);
  transform: rotate(45deg);
  box-shadow: rgba(89, 244, 202, 0.6) 0px 0px 6px;
}

.lo-op__pick {
  grid-area: 1 / 2;
  position: relative;
  display: block;
  min-height: 0px;
  padding: 0px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(rgb(215, 219, 217), rgb(174, 180, 177) 70%, rgb(141, 147, 144));
  border: 1px solid rgba(240, 244, 242, 0.55);
}

.lo-op__art {
  position: absolute;
  inset: 0px 0px max(0.42rem, 22px);
  display: block;
  overflow: hidden;
}

.lo-op__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 6%;
  display: block;
}

.lo-op__glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: max(0.5rem, 22px);
  font-weight: 900;
  color: rgba(17, 22, 20, 0.45);
}

.lo-op__sub {
  position: absolute;
  left: 2px;
  top: 2px;
  width: max(0.2rem, 12px);
  height: max(0.2rem, 12px);
  padding: 2px;
  object-fit: contain;
  background: rgba(20, 24, 23, 0.85);
}

.lo-op__ribbon {
  position: absolute;
  right: 3px;
  top: 0px;
  padding: 3px 3px 7px;
  font-size: max(0.11rem, 8px);
  font-weight: 800;
  line-height: 1.1;
  writing-mode: vertical-rl;
  color: var(--ice-900, #0d2236);
  background: var(--ice);
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% calc(100% - 5px), 0px 100%);
}

.lo-op__kit {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: max(0.42rem, 22px);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0px 3px;
  background: linear-gradient(rgba(20, 24, 23, 0.7), rgba(20, 24, 23, 0.95));
}

.lo-op__slot {
  display: grid;
  place-items: center;
  width: max(0.34rem, 18px);
  height: max(0.34rem, 18px);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lo-op__slot .lo-sicon, .lo-op__slot .lo-mglyph {
  width: 100%;
  height: 100%;
  border: 0px;
}

.lo-op__slot .lo-sicon__outline, .lo-op__slot .lo-sicon__ring {
  display: none;
}

.lo-op__slot .lo-mglyph__t {
  font-size: max(0.16rem, 10px);
}

.lo-op__meta {
  grid-area: 2 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0px;
  padding-top: max(0.04rem, 2px);
}

.lo-op__pot {
  display: flex;
  gap: 2px;
}

.lo-op__pot i {
  width: max(0.06rem, 4px);
  height: max(0.06rem, 4px);
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

.lo-op__pot i.is-on {
  background: rgb(201, 207, 204);
}

.lo-op__name {
  max-width: 100%;
  font-size: max(0.17rem, 11px);
  font-weight: 800;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lo-op__bonds {
  grid-area: 3 / 1 / auto / -1;
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  min-height: max(0.26rem, 16px);
  padding-top: 2px;
}

.lo-op__bond {
  display: grid;
  place-items: center;
  width: max(0.26rem, 16px);
  height: max(0.26rem, 16px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.lo-op__bond img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.lo-op.is-standin .lo-op__art img {
  filter: saturate(0.5);
}

.lo-op__quick {
  flex: 0 0 auto;
  width: var(--qw);
  --q: calc(var(--qw) - max(.12rem, 8px));
  --qg: max(.06rem, 4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qg);
  padding: max(0.06rem, 4px) 0px;
  overflow-y: auto;
  scrollbar-width: none;
  background: rgba(16, 20, 19, 0.92);
  border-width: 1px 1px 1px 0px;
  border-style: solid solid solid none;
  border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) currentcolor;
  border-image: none;
  animation: lo-q-in 160ms var(--ease-out) backwards;
}

@keyframes lo-q-in {
  0% {
    opacity: 0;
    transform: translateX(-6px);
  }
}

.lo-op__quick .lo-q:not(.is-on):not(.lo-q--empty) {
  opacity: 0.55;
}

.lo-op__quick .lo-q.is-on {
  opacity: 1;
}

.lo-op__quick--cult {
  width: var(--qcw);
  padding: max(0.08rem, 5px);
  justify-content: center;
}

.lo-op__quick--cult .lo-cult {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.lo-op__quick--cult .lo-select {
  width: 100%;
}

.lo-op__none {
  margin: auto 0px;
  font-size: max(0.12rem, 9px);
  color: var(--text-dim);
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
}

.lo-op--diy {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(0.08rem, 4px);
  width: var(--opw);
  padding: 0.1rem;
  font: inherit;
  color: var(--text-hi);
  cursor: pointer;
  background: linear-gradient(rgba(150, 160, 156, 0.2), rgba(80, 88, 85, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.lo-op--diy:hover {
  border-color: var(--tc);
  background: linear-gradient(rgba(170, 180, 176, 0.26), rgba(90, 98, 95, 0.18));
}

.lo-diy__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 74%;
  aspect-ratio: 1 / 1.25;
  color: rgba(255, 255, 255, 0.78);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.lo-diy__glyph {
  width: 62%;
  height: 62%;
}

.lo-diy__faces {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 70%;
}

.lo-diy__face {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgb(26, 31, 29);
  border: 1px solid var(--tc);
  font-weight: 900;
}

.lo-diy__label {
  font-size: max(0.16rem, 11px);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.lo-diy__n {
  font-size: max(0.3rem, 16px);
  color: var(--text-lo);
}

.lo-diy__n b {
  color: var(--text-hi);
  font-size: max(0.4rem, 20px);
}

.lo-drawer {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 4;
  width: var(--drawer-w);
  display: flex;
  flex-direction: column;
  background: rgb(14, 18, 17);
  border-right: 1px solid var(--line-2);
  box-shadow: rgba(0, 0, 0, 0.55) 0.1rem 0px 0.4rem;
  animation: lo-drawer-in 200ms var(--ease-out) backwards;
}

@keyframes lo-drawer-in {
  0% {
    transform: translateX(-24px);
    opacity: 0;
  }
}

.lo-drawer__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.06rem;
  height: max(0.42rem, 30px);
  padding: 0px 0.16rem;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.15rem, 11px);
  font-weight: 700;
  color: var(--text-md);
  background: rgb(22, 27, 25);
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.lo-drawer__close:hover {
  color: var(--mint-400);
}

.lo-drawer__close .icon {
  width: max(0.18rem, 12px);
  height: max(0.18rem, 12px);
}

.lo-drawer .lo-detail {
  border: 0px;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 0px;
}

.lo-igrid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(0px, 1fr));
  grid-auto-columns: var(--itw);
  gap: 0.14rem 0.16rem;
  min-height: 0px;
}

.lo-item {
  position: relative;
  display: grid;
  grid-template-columns: min(1.45rem, 40%) minmax(0px, 1fr);
  align-items: start;
  gap: 0.14rem;
  min-height: 0px;
  padding: 0.14rem 0.12rem 0.1rem 0.2rem;
  font: inherit;
  color: var(--text-hi);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(rgba(48, 54, 52, 0.9), rgba(28, 32, 31, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lo-item::before {
  content: "";
  position: absolute;
  left: 0.05rem;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 3px;
  background: rgba(255, 255, 255, 0.7);
}

.lo-item:hover {
  border-color: rgba(255, 255, 255, 0.26);
}

.lo-item__icon {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(rgb(226, 229, 227), rgb(195, 200, 197));
  border: 1px solid rgb(240, 242, 241);
}

.lo-item__icon img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.lo-item__icon .icon {
  width: 44%;
  height: 44%;
  color: rgb(89, 96, 93);
}

.lo-item__body {
  min-width: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.lo-item__head {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  min-width: 0px;
}

.lo-item__head .tier {
  flex: 0 0 auto;
}

.lo-item__name {
  font-size: max(0.19rem, 12px);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lo-item__desc {
  font-size: max(0.14rem, 10px);
  line-height: 1.45;
  color: var(--text-md);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lo-item__desc span, .lo-idetail__eff span {
  font-size: inherit;
}

.lo-item__zoom {
  position: absolute;
  right: 0.1rem;
  bottom: 0.08rem;
  color: rgba(255, 255, 255, 0.45);
}

.lo-item__zoom .icon {
  width: max(0.2rem, 13px);
  height: max(0.2rem, 13px);
}

.lo-item__tag {
  position: absolute;
  right: 0.08rem;
  top: 0.08rem;
  padding: 1px 5px;
  font-size: max(0.11rem, 8px);
  color: var(--amber);
  border: 1px solid rgba(246, 163, 41, 0.5);
  background: rgba(0, 0, 0, 0.4);
}

.lo-idetail .lo-item__tag {
  position: static;
}

.lo-idetail {
  position: absolute;
  inset: 0px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.2rem;
  background: rgba(4, 6, 6, 0.72);
  backdrop-filter: blur(4px);
  animation: lo-in 160ms var(--ease-out) backwards;
}

.lo-idetail__box {
  position: relative;
  width: min(8.8rem, 100% - 1.4rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0.28rem 0.34rem 0.2rem;
  background: radial-gradient(120% 90% at 20% 0%, rgb(42, 47, 45), rgb(21, 25, 24) 60%, rgb(16, 19, 18));
  border: 2px solid rgba(232, 236, 234, 0.7);
  box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.7) 0px 0.2rem 0.6rem;
}

.lo-idetail__close {
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: max(0.46rem, 30px);
  height: max(0.46rem, 30px);
  padding: 0px;
  color: var(--text-hi);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.lo-idetail__close .icon {
  width: 60%;
  height: 60%;
}

.lo-idetail__head {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding-right: 0.6rem;
}

.lo-idetail__head h3 {
  margin: 0px;
  font-size: max(0.3rem, 17px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.lo-idetail__price {
  margin-left: auto;
  font-size: max(0.14rem, 10px);
  color: var(--text-lo);
}

.lo-idetail__price b {
  color: var(--gold-2);
  font-size: max(0.2rem, 13px);
}

.lo-idetail__main {
  display: grid;
  grid-template-columns: max(2rem, 96px) minmax(0px, 1fr);
  gap: 0.3rem;
  margin-top: 0.22rem;
  align-items: start;
}

.lo-idetail__icon {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(rgb(226, 229, 227), rgb(195, 200, 197));
  border: 3px solid rgba(232, 236, 234, 0.85);
}

.lo-idetail__icon img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.lo-idetail__icon .icon {
  width: 40%;
  height: 40%;
  color: rgb(89, 96, 93);
}

.lo-idetail__text {
  min-width: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
}

.lo-idetail__chip {
  padding: 0.02rem 0.1rem;
  font-size: max(0.14rem, 10px);
  font-weight: 800;
  color: rgb(26, 31, 29);
  background: rgb(169, 176, 173);
}

.lo-idetail__chip.is-adv {
  margin-top: 0.06rem;
  background: rgb(226, 192, 65);
}

.lo-idetail__eff {
  margin: 0px;
  font-size: max(0.17rem, 12px);
  line-height: 1.6;
  color: var(--text-hi);
  white-space: pre-line;
}

.lo-idetail__flavor {
  margin: 0.1rem 0px 0px;
  font-size: max(0.14rem, 10px);
  line-height: 1.6;
  font-style: italic;
  color: var(--text-lo);
  white-space: pre-line;
}

.lo-idetail__foot {
  margin-top: 0.16rem;
  text-align: right;
  font-size: max(0.12rem, 9px);
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.lo-idetail__nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: max(0.6rem, 36px);
  height: max(0.9rem, 52px);
  padding: 0px;
  color: rgba(240, 244, 242, 0.85);
  background: none;
  border: 0px;
  cursor: pointer;
}

.lo-idetail__nav:hover {
  color: rgb(255, 255, 255);
}

.lo-idetail__nav .icon {
  width: 100%;
  height: 100%;
}

.lo-bbar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: max(0.8rem, 46px);
  padding: 0px 0.36rem;
  background: linear-gradient(rgba(10, 12, 11, 0.7), rgba(6, 8, 7, 0.96));
  border-top: 1px solid var(--line);
}

.lo-bbar__seg {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}

.lo-bbar__seg button {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  height: max(0.46rem, 30px);
  padding: 0px max(0.26rem, 14px);
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.18rem, 12px);
  font-weight: 800;
  color: var(--text-md);
  background: none;
  border: 0px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.lo-bbar__seg button .icon {
  width: max(0.22rem, 14px);
  height: max(0.22rem, 14px);
  padding: 2px;
  border-radius: 4px;
  color: rgb(6, 32, 25);
  background: var(--mint-500);
}

.lo-bbar__seg button.is-on {
  color: rgb(17, 22, 20);
  background: rgb(238, 241, 239);
}

.lo-bbar__tiers {
  flex: 1 1 auto;
  min-width: 0px;
  display: flex;
  align-items: center;
  gap: 0.04rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 0.14rem;
}

.lo-bbar__tier {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  height: max(0.42rem, 28px);
  padding: 0px max(0.16rem, 8px);
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.15rem, 11px);
  color: var(--text-lo);
  background: none;
  border-width: 0px 0px 2px;
  border-style: none none solid;
  border-color: currentcolor currentcolor transparent;
  border-image: none;
  cursor: pointer;
  white-space: nowrap;
}

.lo-bbar__tier + .lo-bbar__tier::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--line);
}

.lo-bbar__tier:hover:not(:disabled) {
  color: var(--text-hi);
}

.lo-bbar__tier.is-on {
  color: var(--text-hi);
  border-bottom-color: var(--mint-500);
}

.lo-bbar__tier:disabled {
  opacity: 0.35;
  cursor: default;
}

.lo-bbar__roman {
  display: grid;
  place-items: center;
  min-width: max(0.3rem, 18px);
  height: max(0.26rem, 16px);
  padding: 0px 2px;
  font-size: max(0.13rem, 9px);
  font-weight: 800;
  border: 1px solid;
  border-radius: 3px;
}

.lo-bbar__diy {
  position: absolute;
  left: 50%;
  top: max(-0.2rem, -14px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0px 4px;
  font-size: max(0.12rem, 9px);
  color: var(--text-md);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.lo-bbar__diy .icon {
  width: max(0.13rem, 9px);
  height: max(0.13rem, 9px);
}

.lo-confirm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  height: max(0.6rem, 38px);
  padding: 0px max(0.24rem, 14px);
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: max(0.2rem, 13px);
  font-weight: 900;
  color: rgb(17, 22, 20);
  background: rgb(238, 241, 239);
  border: 0px;
  cursor: pointer;
}

.lo-confirm .icon {
  width: max(0.26rem, 16px);
  height: max(0.26rem, 16px);
  padding: 2px;
  color: rgb(238, 241, 239);
  background: rgb(26, 31, 29);
}

.lo-confirm:hover {
  background: rgb(255, 255, 255);
}

.lo-help {
  display: grid;
  grid-template-columns: max-content minmax(0px, 1fr);
  gap: 0.1rem 0.2rem;
  margin: 0px;
  font-size: max(0.16rem, 12px);
  line-height: 1.6;
}

.lo-help dt {
  font-weight: 800;
  color: var(--mint-400);
  white-space: nowrap;
}

.lo-help dd {
  margin: 0px;
  color: var(--text-md);
}

@media (max-width: 1100px) {
  .lo-top--deck .lo-count, .lo-top--deck .lo-sync {
    display: none;
  }

  .lo-top__note {
    max-width: 4.6rem;
  }
}

@media (max-width: 900px) {
  .lo-top--deck .lo-tbtn__l, .lo-quickbtn__txt small, .lo-assist__k {
    display: none;
  }

  .lo-top--deck .lo-top__center {
    display: none;
  }

  .lo-top--deck {
    grid-template-columns: max-content minmax(0px, 1fr);
  }

  .lo-bbar__tier > span:not(.lo-bbar__roman):not(.lo-bbar__diy) {
    display: none;
  }
}

@media (max-height: 520px) {
  .lo-deck {
    padding-top: 0.12rem;
    padding-bottom: 0.1rem;
    gap: 0.2rem;
  }

  .lo-tgrid {
    gap: 0.1rem;
  }

  .lo-tmark::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lo-drawer, .lo-op__quick, .lo-pop, .lo-idetail {
    animation: auto ease 0s 1 normal none running none;
  }

  .lo-deck {
    transition: none;
  }

  .lo--deck .lo__bg, .lo--deck .lo-top, .lo--deck .lo-top__center, .lo--deck .lo-top__right, .lo--deck .lo-note, .lo--deck .lo-tgroup, .lo--deck .lo-bbar, .lo--deck .own, .lo--deck .diy {
    animation: auto ease 0s 1 normal none running none;
  }
}

.lo {
  animation: 150ms linear 0s 1 normal backwards running tr-veil;
}

.lo__bg {
  animation: 340ms ease-out 140ms 1 normal backwards running tr-fade;
}

.lo-top {
  animation: 260ms ease-out 170ms 1 normal backwards running tr-fade;
}

.lo-top__center {
  animation: tr-right 400ms var(--tr-ease) 200ms backwards;
}

.lo-top__right {
  animation: tr-right 420ms var(--tr-ease) 250ms backwards;
}

.lo-note {
  animation: 300ms ease-out 230ms 1 normal backwards running tr-fade;
}

.lo-tgroup {
  animation-delay: calc(240ms + var(--g, 0) * 70ms);
}

.lo-tgroup:nth-child(2) {
  --g: 1;
}

.lo-tgroup:nth-child(3) {
  --g: 2;
}

.lo-tgroup:nth-child(4) {
  --g: 3;
}

.lo-tgroup:nth-child(5) {
  --g: 4;
}

.lo-tgroup:nth-child(6) {
  --g: 5;
}

.lo-tgroup:nth-child(n+7) {
  --g: 6;
}

.lo-bbar {
  animation: tr-rise 420ms var(--tr-ease) 380ms backwards;
}

.lo-roster {
  animation: tr-left 440ms var(--tr-ease) 220ms backwards;
}

.lo-detail-wrap {
  animation: tr-right 440ms var(--tr-ease) 280ms backwards;
}

.own, .diy {
  animation: 300ms ease-out 150ms 1 normal backwards running tr-fade;
}

.own-tier {
  animation-delay: calc(200ms + var(--g, 0) * 60ms);
}

.own-tier:nth-child(2) {
  --g: 1;
}

.own-tier:nth-child(3) {
  --g: 2;
}

.own-tier:nth-child(4) {
  --g: 3;
}

.own-tier:nth-child(n+5) {
  --g: 4;
}

.lo-drawer {
  animation: lo-drawer-slide 320ms var(--tr-ease) backwards;
}

@keyframes lo-drawer-slide {
  0% {
    transform: translateX(-0.6rem);
    opacity: 0;
  }
}

.lo.is-leaving {
  pointer-events: none;
  animation: 170ms linear 130ms 1 normal forwards running tr-lift;
}

.lo.is-leaving > * {
  animation: 140ms ease-in 0s 1 normal forwards running tr-out;
}

@media (prefers-reduced-motion: reduce) {
  .lo, .lo *, .own *, .diy * {
    animation-delay: 0ms !important;
  }
}

.diy-pick__label {
  white-space: nowrap;
}

.diy-pick__back {
  align-self: center;
  margin-bottom: 0px;
}

.diy-pick:not(.is-detail) .diy-pick__back {
  display: none;
}

.diy-pick__backrow {
  display: flex;
  align-items: center;
  gap: 0.06rem;
}

.diy-pick__col {
  min-width: 0px;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.diy-pick__glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: max(calc(.3 * var(--t)), 18px);
  color: var(--text-lo);
}

.diy-opt.is-taken .lo-q, .diy-opt.is-taken .lo-cult {
  opacity: 0.6;
}

.diy-opt__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.04rem;
  min-width: 0px;
}

.diy-opt__nocult {
  justify-content: center;
  color: var(--text-dim);
}

.lo-viewbtn {
  margin-left: auto;
}

.lo-deck.is-dragging, .lo-deck.is-dragging .lo-op__card, .lo-deck.is-dragging .lo-op__pick {
  cursor: grabbing;
  user-select: none;
}

.lo-tmark__art {
  display: block;
  width: 1.5rem;
  height: 5.95rem;
  max-height: calc(100% - max(.3rem, calc(18px * var(--sp-ui, 1))));
  object-fit: contain;
  object-position: 50% 0px;
}

.lo-tmark__css {
  flex: 1 1 auto;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  width: max(.86rem, 32px, calc(44px * var(--sp-ui, 1)));
  padding: .12rem 0 max(.34rem, calc(20px * var(--sp-ui, 1)));
  overflow: hidden;
  background: linear-gradient(rgb(42, 47, 45), rgb(21, 25, 24) 60%, rgb(16, 19, 18));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 3px 0 var(--tc), 0 .06rem .2rem rgba(0, 0, 0, .4);
}

.lo-op__tier img {
  min-width: 0px;
  min-height: 0px;
}

.lo-op__phase {
  display: block;
  flex: 0 0 auto;
  width: max(0.24rem, 14px);
  height: max(0.2rem, 12px);
  object-fit: contain;
  opacity: 0.65;
  font-size: max(calc(.12 * var(--t)), 9px);
  text-align: center;
  color: var(--text-md);
}

.lo-op__lvrow.is-elite .lo-op__phase {
  opacity: 1;
  color: var(--gold-2);
}

.lo-op__lvrow.is-elite img.lo-op__phase {
  filter: brightness(0) saturate(100%) invert(85%) sepia(70%) saturate(655%) hue-rotate(350deg);
}

.lo-bbar__lock {
  flex: 0 1 auto;
  min-width: 0px;
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0 max(.12rem, calc(6px * var(--sp-ui, 1)));
  height: max(0.4rem, 26px);
  font-size: max(calc(.14 * var(--t)), 10px);
  font-weight: 700;
  color: var(--amber);
  background: rgba(246, 163, 41, 0.12);
  border: 1px solid rgba(246, 163, 41, 0.4);
  white-space: nowrap;
}

.lo-bbar__lock > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lo-bbar__lock .icon {
  flex: 0 0 auto;
  width: max(0.16rem, 11px);
  height: max(0.16rem, 11px);
}

.lo--deck {
  --tr-ease: cubic-bezier(.16, .84, .3, 1);
}

@keyframes lo-tr-fade {
  0% {
    opacity: 0;
  }
}

@keyframes lo-tr-right {
  0% {
    opacity: 0;
    transform: translateX(0.36rem);
  }
}

@keyframes lo-tr-rise {
  0% {
    opacity: 0;
    transform: translateY(0.22rem);
  }
}

.lo--deck .lo__bg {
  animation: 340ms ease-out 140ms 1 normal backwards running lo-tr-fade;
}

.lo--deck .lo-top {
  animation: 260ms ease-out 170ms 1 normal backwards running lo-tr-fade;
}

.lo--deck .lo-top__center {
  animation: lo-tr-right 400ms var(--tr-ease) 200ms backwards;
}

.lo--deck .lo-top__right {
  animation: lo-tr-right 420ms var(--tr-ease) 250ms backwards;
}

.lo--deck .lo-note {
  animation: 300ms ease-out 230ms 1 normal backwards running lo-tr-fade;
}

.lo--deck .lo-tgroup {
  animation-delay: calc(240ms + var(--g, 0) * 70ms);
}

.lo--deck .lo-tgroup:nth-child(2) {
  --g: 1;
}

.lo--deck .lo-tgroup:nth-child(3) {
  --g: 2;
}

.lo--deck .lo-tgroup:nth-child(4) {
  --g: 3;
}

.lo--deck .lo-tgroup:nth-child(5) {
  --g: 4;
}

.lo--deck .lo-tgroup:nth-child(6) {
  --g: 5;
}

.lo--deck .lo-tgroup:nth-child(n+7) {
  --g: 6;
}

.lo--deck .lo-bbar {
  animation: lo-tr-rise 420ms var(--tr-ease) 380ms backwards;
}

.lo--deck .own, .lo--deck .diy {
  animation: 300ms ease-out 150ms 1 normal backwards running lo-tr-fade;
}