.lsel {
  --lsel-bg: #14141d;
  --lsel-line: rgba(255, 255, 255, .12);
  --lsel-fg: #fff;
  --lsel-fg2: rgba(255, 255, 255, .68);
  --lsel-fg3: rgba(255, 255, 255, .42);
  --lsel-red: #ff3b5c;
  --lsel-ease: cubic-bezier(.2, .8, .2, 1);
  --lsel-spring: cubic-bezier(.2, 1.4, .4, 1);
  position: relative;
  display: inline-block;
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.2;
}
.lsel-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--lsel-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--lsel-fg);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background .2s var(--lsel-ease), border-color .2s var(--lsel-ease), transform .2s var(--lsel-spring);
}
.lsel-btn::-webkit-details-marker { display: none; }
.lsel-btn::marker { content: ''; }
.lsel-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.lsel-btn:active { transform: scale(.97); }
.lsel-btn:focus-visible { outline: 2px solid var(--lsel-red); outline-offset: 3px; }
.lsel-ic {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--lsel-fg2);
  transition: transform .6s var(--lsel-spring), color .2s var(--lsel-ease);
}
.lsel-btn:hover .lsel-ic,
.lsel[open] .lsel-ic { transform: rotate(-24deg); color: var(--lsel-red); }
.lsel-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.lsel-chev {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--lsel-fg3);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
  transition: transform .3s var(--lsel-spring), stroke .2s var(--lsel-ease);
}
.lsel[open] .lsel-chev { transform: rotate(0deg); stroke: var(--lsel-fg); }
.lsel .lsel-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 40;
  display: block;
  width: max-content;
  min-width: 248px;
  max-width: calc(100vw - 32px);
  max-height: min(430px, 70vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--lsel-line);
  border-radius: 18px;
  background: var(--lsel-bg);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3);
  transform-origin: 24px 100%;
  animation: lsel-in .26s var(--lsel-spring) both;
}
.lsel.is-closing .lsel-menu { animation: lsel-out .16s var(--lsel-ease) both; }
.lsel .lsel-menu li {
  margin: 0;
  padding: 0;
  animation: lsel-item .32s var(--lsel-ease) both;
  animation-delay: calc(var(--i, 0) * 18ms + 40ms);
}
.lsel a.lsel-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  color: var(--lsel-fg2);
  font-weight: 600;
  text-decoration: none;
  outline: none;
  transition: background .18s var(--lsel-ease), color .18s var(--lsel-ease), transform .18s var(--lsel-ease);
}
.lsel a.lsel-opt:hover,
.lsel a.lsel-opt:focus-visible { background: rgba(255, 255, 255, .07); color: var(--lsel-fg); text-decoration: none; transform: translateX(2px); }
.lsel a.lsel-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--lsel-red); }
.lsel-code {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: var(--lsel-fg2);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  transition: background .18s var(--lsel-ease), color .18s var(--lsel-ease);
}
.lsel-btn .lsel-code { display: none; }
.lsel-name { flex: 1 1 auto; white-space: nowrap; }
.lsel-ok {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--lsel-red);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.lsel a.lsel-opt[aria-current] { color: var(--lsel-fg); background: rgba(255, 59, 92, .1); }
.lsel a.lsel-opt[aria-current] .lsel-code { background: var(--lsel-red); color: #fff; }
.lsel a.lsel-opt[aria-current] .lsel-ok { opacity: 1; animation: lsel-tick .5s .2s var(--lsel-ease) forwards; }
.lsel a.lsel-opt.is-picked .lsel-code { animation: lsel-beat .5s var(--lsel-spring); background: var(--lsel-red); color: #fff; }
@keyframes lsel-in {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes lsel-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px) scale(.96); }
}
@keyframes lsel-item {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes lsel-tick {
  to { stroke-dashoffset: 0; }
}
@keyframes lsel-beat {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  60% { transform: scale(.94); }
  100% { transform: scale(1); }
}
@media (max-width: 560px) {
  .lsel .lsel-menu { min-width: min(280px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .lsel .lsel-menu,
  .lsel .lsel-menu li,
  .lsel.is-closing .lsel-menu,
  .lsel a.lsel-opt.is-picked .lsel-code { animation: none; }
  .lsel a.lsel-opt[aria-current] .lsel-ok { animation: none; stroke-dashoffset: 0; }
  .lsel-ic,
  .lsel-chev,
  .lsel-btn,
  .lsel a.lsel-opt { transition: none; }
  .lsel a.lsel-opt:hover,
  .lsel a.lsel-opt:focus-visible { transform: none; }
}