.lx {
  --lx-ai: var(--brand);
  --lx-ai-soft: #b8c3ff;
  --lx-ai-tint: rgb(35 71 255 / .07);
  --lx-ok: #16a34a;
  --lx-line: #ebebee;
  --lx-nav: calc(64px + var(--top-bar, 0px));
}
.lx p, .lx h3 { margin: 0; }

.lx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.lx-cards { display: flex; flex-direction: column; min-width: 0; }
.lx-side { min-width: 0; padding: 32px; border-left: 1px solid var(--rail); }

.lx-card + .lx-card { border-top: 1px solid var(--rail); }
.lx-card__stage {
  position: relative; overflow: hidden;
  height: 480px; margin: 32px 32px 0;
  padding: 46px 44px 0;
  border-radius: 16px;
  background: var(--gk-tray, #f5f5f7);
  display: flex; flex-direction: column;
}
.lx-card__label {
  position: relative;
  margin: 0 0 8px !important;
  font: 500 12.5px/1.2 var(--font-ui); color: #8b8f9a;
  transition: color .25s ease;
}
.lx-card:is([data-phase="sent"], [data-phase="work"]) .lx-card__label { color: var(--lx-ai); }

.lx-card__ask { display: none; }

.lx-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 26px 32px 32px;
}
.lx-card__title {
  font: 500 18px/1.3 var(--font-ui); letter-spacing: -.012em; color: var(--ink-nav);
}
.lx-card__text {
  margin-top: 6px !important; max-width: 50ch;
  font: 400 15.5px/1.5 var(--font-ui); color: var(--gk-soft, #6b7280);
  text-wrap: pretty;
}
.lx-card__go {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14.5px/1 var(--font-ui); color: var(--ink);
  white-space: nowrap;
}
.lx-card__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s cubic-bezier(.2, .8, .3, 1); }
.lx-card__go:hover svg { transform: translateX(3px); }

.lx-win {
  position: relative; flex: 1 1 auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-width: 0; min-height: 0;
  border-radius: 12px 12px 0 0;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--gk-line, #e6e7eb);
  transition: box-shadow .25s ease;
}
.lx-card:is([data-phase="sent"], [data-phase="work"]) .lx-win { box-shadow: 0 0 0 1.5px var(--lx-ai); }
.lx-url {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 8px;
  border-bottom: 1px solid var(--lla-line);
}
.lx-tabs { flex: none; padding: 2px; }
.lx-tabs > span { height: 24px; padding: 0 6px; font-size: 11.5px; }
.lx-tabs .lla-i { width: 14px; height: 14px; }
.lx-url__addr {
  display: inline-flex; justify-content: center; flex: 1; min-width: 0;
  font: 400 12px/1.4 var(--lla-font); color: var(--lla-text);
  overflow: hidden; white-space: nowrap;
}
.lx-url__addr > span { overflow: hidden; text-overflow: ellipsis; }
.lx-lang {
  flex: none;
  padding: 3px 7px; border-radius: 5px;
  background: var(--lla-tint); color: var(--lla-blue-text);
  font: 700 10px/1.3 var(--lla-font); letter-spacing: .04em;
}
.lx-modes { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--lla-tint); }
.lx-mode {
  display: flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 7px; border-radius: 6px;
  font: 400 11px/1 var(--lla-font); color: var(--lla-muted);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.lx-mode .lla-i { width: 12px; height: 12px; }
.lx-mode--page:not(.is-off),
.lx-mode--code.is-on { background: #fff; color: var(--lla-ink); box-shadow: 0 1px 2px rgb(24 24 34 / .08); }
.lx-publish { flex: none; height: 26px; padding: 0 10px; font-size: 11.5px; }

.lx-canvas {
  position: relative; overflow: hidden;
  background: var(--surface);
  container-type: inline-size;
}

.lx-page {
  --pv-accent: #141a21;
  position: relative; z-index: 2;
  font-family: var(--font-ui); color: var(--ink-nav);
}
.lx-page p { margin: 0; }

.lx-ann {
  padding: 5px 22px; text-align: center;
  background: var(--pv-accent); color: #fff;
  font: 500 10px/1.5 var(--font-ui); letter-spacing: .02em;
}
.lx-nav {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 22px; border-bottom: 1px solid var(--hairline);
}
.lx-logo { font: 600 12px/1.3 var(--font-ui); letter-spacing: .16em; color: var(--ink); white-space: nowrap; }
.lx-menu { display: flex; gap: 14px; font: 400 11.5px/1.3 var(--font-ui); color: var(--ink-soft); }
.lx-cart { position: relative; margin-left: auto; display: inline-flex; color: var(--ink); }
.lx-cart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lx-cart b {
  position: absolute; right: -6px; top: -5px;
  display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pv-accent); color: #fff; font: 600 8.5px/1 var(--font-ui);
}

.lx-pdp {
  display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 26px; align-items: start;
  padding: 18px 22px 16px;
}
.lx-gallery { min-width: 0; }
.lx-shot {
  position: relative; aspect-ratio: 1; border-radius: 10px;
  background: #f3f1ee;
}
.lx-shot > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.lx-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: #fff; color: var(--ink);
  font: 600 10.5px/1.4 var(--font-ui);
  box-shadow: 0 6px 16px -8px rgb(16 24 40 / .45);
}
.lx-badge > i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgb(22 163 74 / .18); }
.lx-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.lx-thumbs span { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #f3f1ee; box-shadow: inset 0 0 0 1.5px transparent; }
.lx-thumbs span.is-on { box-shadow: 0 0 0 1.5px var(--pv-accent); }
.lx-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.6); }
.lx-thumbs span:first-child img { transform: none; }

.lx-info { min-width: 0; padding-top: 2px; }
.lx-kicker { font: 600 9.5px/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #8b8f9a; }
.lx-title { position: relative; margin-top: 6px; }
.lx-h1 { font: 400 25px/1.12 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.lx-benefit { padding-top: 6px; font: 400 12px/18px var(--font-ui); color: #6b7280; max-width: 36ch; }
.lx-pricing { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin-top: 12px; }
.lx-price { font: 400 21px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.lx-anchor { display: inline-flex; align-items: baseline; gap: 8px; }
.lx-anchor s { font: 400 12.5px/1 var(--font-ui); color: #a1a1aa; }
.lx-anchor em {
  align-self: center; padding: 2px 7px; border-radius: 4px;
  background: #fdecec; color: #b42318;
  font: 600 10px/1.5 var(--font-ui); font-style: normal;
}
.lx-size-k { margin-top: 12px !important; font: 500 9.5px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; }
.lx-sizes { display: flex; gap: 6px; margin-top: 5px !important; }
.lx-sizes b {
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--border); background: #fff;
  font: 400 11px/1.4 var(--font-ui); color: var(--ink-soft);
}
.lx-sizes b.is-on { border-color: var(--pv-accent); color: var(--ink); font-weight: 500; }
.lx-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-top: 12px; height: 38px; padding: 0 14px;
  border-radius: 8px; background: var(--pv-accent);
  font: 600 12.5px/1 var(--font-ui); color: #fff;
}
.lx-proof {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding-top: 8px;
  font: 400 10.5px/1.4 var(--font-ui); color: #6b7280; white-space: nowrap;
}
.lx-stars { display: inline-flex; gap: 1px; }
.lx-stars svg { width: 10px; height: 10px; fill: #f5a623; }

.lx-reviews {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  padding: 6px 22px 22px;
}
.lx-reviews__k { grid-column: 1 / -1; font: 500 13px/1.3 var(--font-display); color: var(--ink); }
.lx-review {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 12px; border-radius: 10px; background: #f6f6f7;
}
.lx-review > img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.lx-review .lx-stars svg { width: 9px; height: 9px; }
.lx-review__q { margin-top: 3px; font: 400 11.5px/17px var(--font-ui); color: var(--ink); }
.lx-review__by { margin-top: 4px !important; font: 400 10px/1.4 var(--font-ui); color: #8b8f9a; }

.lx-v { position: relative; display: block; }
.lx-v > span {
  display: block;
  transition: opacity .42s ease, transform .5s cubic-bezier(.2, .7, .2, 1), filter .42s ease;
}
.lx-v > :not(.is-cur) {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; filter: blur(4px); pointer-events: none;
  transform: translateY(.45em);
}
.lx-v > span:has(~ .is-cur) { transform: translateY(-.45em); }
.lx-v--i { display: inline-block; vertical-align: bottom; }
.lx-v--i > span { white-space: nowrap; }
.lx-v.is-flash > .is-cur { animation: lxFlash 1.6s ease; border-radius: 4px; }
@keyframes lxFlash {
  0%, 25% { background: rgb(35 71 255 / .16); box-shadow: 0 0 0 3px rgb(35 71 255 / .16); }
  100% { background: rgb(35 71 255 / 0); box-shadow: 0 0 0 3px rgb(35 71 255 / 0); }
}

.lx-land { transition: opacity .5s ease, transform .65s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.lx-land:not(.is-on) { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); }

.lx-fold {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .55s cubic-bezier(.33, .9, .3, 1), opacity .4s ease;
}
.lx-fold > * { min-height: 0; overflow: hidden; }
.lx-fold > * > * { transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.lx-fold[data-off].is-off,
.lx-fold[data-on]:not(.is-on) { grid-template-rows: 0fr; opacity: 0; }
.lx-fold[data-on]:not(.is-on) > * > * { transform: translateY(-6px); }

.lx-pop { transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease; }
.lx-pop:not(.is-on) { opacity: 0; transform: translateY(6px) scale(.9); filter: blur(3px); }
.lx-slide { transition: transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s; }
.lx-slide.is-on { transition-delay: 0s; }
.lx-slide:not(.is-on) { transform: translateY(104%); visibility: hidden; }


.lx-mark {
  position: relative;
  outline: 1.5px dashed transparent; outline-offset: 5px; border-radius: 6px;
  transition: outline-color .3s ease, outline-offset .4s cubic-bezier(.2, .7, .2, 1);
}
.lx-mark.is-found { outline-color: var(--lx-ai-soft); outline-offset: 4px; }
.lx-mark.is-fixed { outline-color: transparent; }
.lx-pin {
  position: absolute; left: -14px; top: -12px; z-index: 3;
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lx-ai); color: #fff;
  box-shadow: 0 0 0 2px #fff;
  font: 600 10px/1 var(--font-ui); font-style: normal;
  opacity: 0; transform: scale(.4);
  transition: opacity .25s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease, color .2s ease;
  pointer-events: none;
}
.lx-shot > .lx-pin { left: auto; right: -8px; top: -8px; }
.lx-btn > .lx-pin { left: auto; right: -9px; top: -9px; }
.lx-mark.is-found .lx-pin { opacity: 1; transform: none; }
.lx-mark.is-fixed .lx-pin {
  color: transparent;
  background: var(--lx-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.4 2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}


.lx-scan {
  position: absolute; left: 0; right: 0; top: calc(var(--y, 0) * 100%); z-index: 4;
  height: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  --lx-px: rgb(64 96 255 / .85);
}
.lx-scan.is-on { opacity: 1; }
.lx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, rgb(35 71 255 / .35), var(--lx-ai) 18%, #6f8cff 50%, var(--lx-ai) 82%, rgb(35 71 255 / .35));
  box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 2px 10px rgb(35 71 255 / .55);
}
.lx-scan__band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(180deg, rgb(35 71 255 / 0), rgb(35 71 255 / .07) 55%, rgb(35 71 255 / .18));
}
.lx-scan__px {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: radial-gradient(circle, var(--lx-px) 0 1.2px, transparent 1.7px) 0 0 / 8px 8px;
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 90%),
    repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 24px, #000 24px 32px, transparent 32px 56px, #000 56px 72px, transparent 72px 88px);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent, #000 90%),
    repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 24px, #000 24px 32px, transparent 32px 56px, #000 56px 72px, transparent 72px 88px);
          mask-composite: intersect;
  animation: lxPxCols .7s steps(4) infinite, lxPxRise 1.4s linear infinite;
}
.lx-scan__px--b {
  height: 56px;
  background: radial-gradient(circle, rgb(111 140 255 / .9) 0 1.6px, transparent 2.1px) 4px 4px / 16px 16px;
  animation-duration: 1.1s, 2s;
  animation-direction: reverse, normal;
}
@keyframes lxPxCols {
  to { -webkit-mask-position: 0 0, 88px 0; mask-position: 0 0, 88px 0; }
}
@keyframes lxPxRise { to { background-position: 0 -16px; } }
.lx-scan__tag {
  position: absolute; right: 12px; top: -11px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--lx-ai); color: #fff;
  font: 500 10.5px/1.4 var(--font-ui); white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgb(35 71 255 / .7);
}
.lx-scan__tag i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1.5px solid rgb(255 255 255 / .35); border-top-color: #fff;
  animation: lxSpin .7s linear infinite;
}
.lx-scan__tag em { font-style: normal; font-variant-numeric: tabular-nums; min-width: 3ch; opacity: .85; }

.lx-tag {
  position: absolute; right: -8px; bottom: calc(100% - 6px); z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 6px;
  background: #0f1115; color: #fff;
  font: 500 10px/1.3 var(--font-ui); white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgb(16 24 40 / .6);
}
.lx-tag img { width: 12px; height: 12px; display: block; }
.lx-code {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) 196px;
  background: #0f1115;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -18px 40px -24px rgb(16 24 40 / .55);
}
.lx-code__main { min-width: 0; }
.lx-code__head {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 16px;
  border-bottom: 1px solid rgb(255 255 255 / .07);
  font: 500 11.5px/1 var(--font-ui); color: rgb(255 255 255 / .55);
}
.lx-code__head b { font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; }
.lx-code pre { margin: 0; padding: 12px 16px 26px; overflow: hidden; }
.lx-code code { display: block; font: 400 11.5px/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: #c9d0dc; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.lx-code code > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.lx-code--c { color: #6b7280; }
.lx-code--t { color: #93a4ff; }
.lx-code--f { color: #f7b777; }
.lx-events { padding: 10px 14px; border-left: 1px solid rgb(255 255 255 / .07); }
.lx-events p { margin: 0; }
.lx-events__head {
  display: flex; align-items: center; gap: 7px; padding-bottom: 9px; margin-bottom: 6px !important;
  font: 500 11.5px/1 var(--font-ui); color: rgb(255 255 255 / .55);
}
.lx-events__head img { width: 13px; height: 13px; display: block; }
.lx-events__row {
  display: flex; align-items: center; gap: 7px; padding: 5px 0;
  font: 500 11.5px/1.3 var(--font-ui); color: #fff;
}
.lx-events__row svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #4ade80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-events__row span { margin-left: auto; font-weight: 400; font-size: 10.5px; color: #4ade80; }

.lx-skel {
  position: absolute; inset: 0; z-index: 1;
  padding: 14px 22px;
  pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
}
.lx-card.is-empty .lx-skel { opacity: 1; }
.lx-skel i {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #eeeef2 0%, #f7f7f9 45%, #eeeef2 90%) 0 0 / 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .lx-skel i { animation: lxShimmer 1.6s linear infinite; }
}
@keyframes lxShimmer { to { background-position: -200% 0; } }
.lx-skel__nav { display: flex; justify-content: space-between; padding: 12px 0 14px; border-bottom: 1px solid var(--hairline); }
.lx-skel__nav i { width: 108px; height: 12px; }
.lx-skel__nav .lx-skel__logo { width: 96px; }
.lx-skel__pdp { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 26px; padding: 18px 0; }
.lx-skel__img { aspect-ratio: 1; border-radius: 10px !important; }
.lx-skel__copy i { height: 12px; }
.lx-skel__copy i:nth-child(2) { height: 26px; margin-top: 10px; }
.lx-skel__copy i:nth-child(3) { height: 20px; margin-top: 18px; }
.lx-skel__copy i:nth-child(4) { margin-top: 18px; }
.lx-skel__copy .lx-skel__btn { height: 38px; margin-top: 18px; border-radius: 8px; }

.lx-gen {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 11px; border-radius: 999px;
  background: var(--surface); color: var(--ink);
  border: 1px solid rgba(16, 24, 40, .06);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 14px 30px -16px rgba(16, 24, 40, .5);
  font: 500 12.5px/1 var(--font-ui); white-space: nowrap;
  opacity: 0; transition: opacity .3s ease;
}
.lx-card.is-empty:is([data-phase="sent"], [data-phase="work"]) .lx-gen { opacity: 1; }
.lx-gen > i {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--lx-ai-tint); border-top-color: var(--lx-ai);
}
.lx-gen > b { display: inline-flex; gap: 3px; align-items: center; margin-left: -3px; }
.lx-gen > b > s { width: 3px; height: 3px; border-radius: 50%; background: currentColor; text-decoration: none; opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .lx-gen > i { animation: lxSpin .9s linear infinite; }
  .lx-gen > b > s { animation: lxDot 1.2s ease-in-out infinite; }
  .lx-gen > b > s:nth-child(2) { animation-delay: .2s; }
  .lx-gen > b > s:nth-child(3) { animation-delay: .4s; }
}
@keyframes lxSpin { to { transform: rotate(360deg); } }
@keyframes lxDot { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }

.lx-chat {
  position: sticky; top: calc(var(--lx-nav) + 32px);
  height: min(640px, calc(100vh - var(--lx-nav) - 64px));
  display: flex; flex-direction: column;
  padding: 8px;
  border: 1px solid var(--gk-line, #e6e7eb); border-radius: 16px;
  background: var(--surface);
}
.lx-turns { flex: 1 1 auto; min-height: 0; display: grid; }
.lx-turn {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  min-height: 0; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.lx-turn.is-cur {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s ease .15s, transform .35s ease .15s, visibility 0s linear .15s;
}
.lx-turn > * { animation: lxPop .38s cubic-bezier(.22, .7, .16, 1) backwards; }
@keyframes lxPop { from { opacity: 0; transform: translateY(8px); } }
.lx-turn > :not(.is-shown), .lx-act:not(.is-shown) { display: none; }

.lx-msg {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: 14px; background: #f4f4f6;
  font: 400 13px/1.5 var(--font-ui); color: var(--ink-nav);
}
.lx-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px;
  margin-right: 5px; padding: 1px 6px; border-radius: 5px;
  background: var(--lx-ai-tint); color: var(--lx-ai);
  font: 500 12px/1.5 var(--font-ui);
}
.lx-chip svg { width: 11px; height: 11px; fill: currentColor; }
.lx-msg__undo {
  float: right; display: grid; place-items: center;
  width: 22px; height: 22px; margin: 4px -4px -6px 8px; border-radius: 6px;
  background: #fff; color: #8b8f9a; box-shadow: inset 0 0 0 1px var(--lx-line);
}
.lx-msg__undo svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lx-thinking {
  padding: 0 4px;
  font: 400 13px/1.4 var(--font-ui); color: #8b8f9a;
}
.lx:is([data-phase="sent"], [data-phase="work"]) .lx-turn.is-cur .lx-thinking {
  background: linear-gradient(90deg, #8b8f9a 0%, #8b8f9a 40%, #d4d6dd 50%, #8b8f9a 60%, #8b8f9a 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lxShine 1.4s linear infinite;
}
@keyframes lxShine { to { background-position: -200% 0; } }
.lx-plan {
  padding: 0 4px;
  font: 400 13px/1.55 var(--font-ui); color: var(--ink-nav);
  text-wrap: pretty;
}

.lx-changes {
  border: 1px solid var(--lx-line); border-radius: 12px;
  background: #fafafb;
}
.lx-changes__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--lx-line);
  font: 500 12.5px/1 var(--font-ui); color: var(--ink);
}
.lx-changes__head span {
  padding: 4px 7px; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--lx-line);
  font-weight: 400; font-size: 11.5px; color: #6b7280;
}
.lx-acts { list-style: none; margin: 0; padding: 6px 12px 8px; display: flex; flex-direction: column; }
.lx-act {
  display: flex; align-items: flex-start; gap: 9px; padding: 4px 0;
  font: 400 12.5px/18px var(--font-ui); color: var(--ink-nav);
  animation: lxPop .3s cubic-bezier(.22, .7, .16, 1) backwards;
}
.lx-act__mark {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--lx-ai-soft); color: var(--lx-ai);
  font: 600 9px/1 var(--font-ui);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.lx-act__mark svg { display: none; width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-act.is-run .lx-act__mark::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--lx-ai);
  animation: lxSpin .8s linear infinite;
}
.lx-act.is-done .lx-act__mark { background: var(--lx-ai); border-color: var(--lx-ai); }
.lx-act.is-done .lx-act__mark b { display: none; }
.lx-act.is-done .lx-act__mark svg { display: block; }
.lx-reply { padding: 0 4px; font: 400 13px/1.55 var(--font-ui); color: var(--ink-nav); }


.lx-composer { flex: none; margin-top: 14px; --lx-cp: #2563eb; }
.lx-composer__box {
  display: flex; flex-direction: column; min-height: 116px;
  background: #fff; border: 1px solid #dcdfe6; border-radius: 14px;
}
.lx-prompt {
  flex: 1; padding: 12px 13px 4px;
  font: 400 14px/1.42 var(--font-ui); letter-spacing: -.006em; color: #09090b;
}
.lx-prompt__text::after {
  content: ""; display: inline-block; vertical-align: -2px;
  width: 1.5px; height: 1em; margin-left: 1px;
  background: var(--lx-cp);
  animation: lxBlink 1.05s step-end infinite;
}
.lx-prompt__ph { color: #71717a; }
.lx-prompt.is-typing .lx-prompt__ph { display: none; }
.lx-prompt:not(.is-typing) .lx-prompt__text { display: none; }
@keyframes lxBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.lx-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 4px 7px 7px 9px;
}
.lx-type {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 7px; border-radius: 7px;
  background: #f4f4f5; color: #09090b;
  font: 500 12px/1 var(--font-ui); white-space: nowrap;
}
.lx-type svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-type .lx-type__chev { width: 11px; height: 11px; color: #a1a1aa; }
.lx-tools { display: inline-flex; align-items: center; gap: 6px; }
.lx-stack { display: inline-flex; }
.lx-stack i {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7, 0 0 0 2px #fff;
}
.lx-stack i + i { margin-left: -6px; }
.lx-stack img { width: 14px; height: 14px; display: block; }
.lx-go {
  display: inline-flex; border-radius: 7px; overflow: hidden;
  font: 500 12.5px/1 var(--font-ui); color: #fff;
}
.lx-go b, .lx-go s {
  display: grid; place-items: center; height: 30px;
  background: var(--lx-cp); font-weight: 500; text-decoration: none;
}
.lx-go b { padding: 0 12px; white-space: nowrap; }
.lx-go s { width: 24px; box-shadow: inset 1px 0 0 rgb(255 255 255 / .22); }
.lx-go s svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lx[data-step="0"] .lx-go__next,
.lx:not([data-step="0"]) .lx-go__first { display: none; }

@container (max-width: 560px) {
  .lx-ann { padding-inline: 12px; }
  .lx-nav { padding: 9px 14px; }
  .lx-menu { display: none; }
  .lx-pdp { grid-template-columns: 40% minmax(0, 1fr); gap: 14px; padding: 14px; }
  .lx-thumbs { display: none; }
  .lx-kicker, .lx-size-k, .lx-sizes { display: none; }
  .lx-h1 { font-size: 19px; }
  .lx-benefit { font-size: 11px; line-height: 16px; }
  .lx-price { font-size: 17px; }
  .lx-btn { height: 34px; font-size: 11.5px; }
  .lx-proof { white-space: normal; text-align: center; }
  .lx-reviews { grid-template-columns: minmax(0, 1fr); padding: 6px 14px 16px; }
  .lx-review:nth-child(n+3) { display: none; }
  .lx-skel { padding: 12px 14px; }
  .lx-skel__pdp { grid-template-columns: 40% minmax(0, 1fr); gap: 14px; }
  .lx-code { grid-template-columns: minmax(0, 1fr); }
  .lx-events { position: absolute; right: 10px; top: -84px; width: 170px; border-radius: 10px; background: #0f1115; border: 0; }
  .lx-code code { font-size: 10.5px; }
}

@media (max-width: 1100px) {
  .lx-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .lx-side { padding: 24px; }
  .lx-card__stage { margin: 24px 24px 0; padding: 40px 28px 0; }
  .lx-card__foot { padding: 22px 24px 28px; }
  .lx-type { display: none; }
}

@media (max-width: 900px) {
  .lx-grid { grid-template-columns: minmax(0, 1fr); }
  .lx-side { display: none; }
  .lx-card__stage { height: 360px; margin: 20px 20px 0; padding: 34px 16px 0; border-radius: 14px; }
  .lx-card__ask {
    display: block;
    margin: 14px 20px 0 !important; padding: 10px 12px;
    border-radius: 12px; background: var(--gk-tray, #f5f5f7);
    font: 400 13.5px/1.5 var(--font-ui); color: var(--ink-nav);
  }
  .lx-card__foot { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px 26px; }
  .lx-card__text { font-size: 15px; }
}
@media (max-width: 1240px) {
  .lx-tabs > span:not(.is-on) { display: none; }
}
@media (max-width: 520px) {
  .lx-modes, .lx-tabs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lx *, .lx *::before, .lx *::after { transition: none !important; animation: none !important; }
}

.lx-canvas--flow {
  background: #f7f7f9 radial-gradient(circle, #dcdce2 1px, transparent 1.4px) 0 0 / 14px 14px;
}
.lx-flow {
  --pv-accent: var(--brand);
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: start; gap: 0 8px;
  padding: 22px 20px 64px;
  font-family: var(--font-ui); color: #0b1220;
}
.lx-flow p { margin: 0; }

.lx-qs {
  min-width: 0; padding-bottom: 14px; border-radius: 14px;
  background: #fff; box-shadow: 0 0 0 1px #ececef, 0 10px 24px -18px rgb(11 18 32 / .3);
}
.lx-qs__nav {
  display: flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px;
  font: 500 10px/1 var(--font-ui); color: #6b7280; font-variant-numeric: tabular-nums;
}
.lx-qs__nav > svg { width: 12px; height: 12px; flex: none; fill: none; stroke: #0b1220; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lx-qs__nav b {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0;
  font: 700 10.5px/1 var(--font-ui); letter-spacing: -.01em; color: #0b1220; white-space: nowrap;
}
.lx-qs__nav b i {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px;
  background: var(--pv-accent); color: #fff; font: 700 9px/1 var(--font-ui); font-style: normal;
}
.lx-qs__segs { display: flex; gap: 3px; margin: 0 12px; }
.lx-qs__segs i { flex: 1; height: 3px; border-radius: 3px; background: #f0f0f2; }
.lx-qs__segs i.is-done { background: var(--pv-accent); }
.lx-qs__hook {
  display: flex; justify-content: center; padding-top: 12px;
  font: 500 9.5px/1 var(--font-ui); color: var(--pv-accent);
}
.lx-qs__hook > .lx-v { padding: 5px 9px; border-radius: 999px; background: #f6f6f8; color: #4b5563; }
.lx-qs__q {
  position: relative; margin: 14px 12px 12px;
  font: 700 14.5px/1.22 var(--font-ui); letter-spacing: -.02em; text-align: center; text-wrap: balance;
}
.lx-qs__q--form { margin-bottom: 6px; }
.lx-qs__sub { margin: 0 14px 12px !important; text-align: center; font: 400 10px/1.45 var(--font-ui); color: #4b5563; }

.lx-qs__tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 10px; }
.lx-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 10px 6px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px #ececef;
  font: 500 10px/1.25 var(--font-ui); color: #1f2937; text-align: center;
  transition: background-color .3s ease, color .3s ease;
}
.lx-tile.is-pick {
  background: color-mix(in srgb, var(--pv-accent) 9%, #fff); box-shadow: inset 0 0 0 1.5px var(--pv-accent);
  color: #0b1220; font-weight: 600;
}
.lx-tile__ic {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: #f6f6f8; color: #0b1220;
}
.lx-tile.is-pick .lx-tile__ic { background: #fff; color: var(--pv-accent); }
.lx-tile__ic svg { width: 18px; height: 18px; }
.lx-tile__ic.lx-pop { transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease, height .45s cubic-bezier(.33, .9, .3, 1), margin .45s cubic-bezier(.33, .9, .3, 1); }
.lx-tile__ic:not(.is-on) { height: 0; margin-bottom: -7px; }

.lx-qs__slider {
  position: relative; display: grid; gap: 8px; margin: 0 10px; padding: 14px 12px 12px;
  border-radius: 10px; box-shadow: inset 0 0 0 1px #ececef;
}
.lx-qs__val { justify-self: center; font: 650 26px/1 var(--font-ui); letter-spacing: -.035em; color: #0b1220; font-variant-numeric: tabular-nums; }
.lx-qs__track { position: relative; height: 4px; margin: 6px 6px 0; border-radius: 6px; background: rgb(11 18 32 / .08); }
.lx-qs__track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--at) * 100%); border-radius: inherit; background: var(--pv-accent); }
.lx-qs__track s {
  position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #ececef, 0 2px 6px rgb(11 18 32 / .16);
}
.lx-qs__ends { display: flex; justify-content: space-between; font: 500 8.5px/1 var(--font-ui); color: #8a92a0; }
.lx-qs__est {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 4px !important; padding: 8px 9px;
  border-radius: 8px; background: #f6f6f8; color: #1f2937;
  font: 500 9.5px/1.35 var(--font-ui);
}
.lx-qs__est svg { width: 12px; height: 12px; flex: none; margin-top: .5px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lx-qs__btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 32px; margin: 10px 10px 0; padding: 0 10px; border-radius: 8px;
  background: #0b1220; color: #fff;
  font: 600 10.5px/1 var(--font-ui); white-space: nowrap;
}
.lx-qs__btn > .lx-pin { left: auto; right: -9px; top: -9px; }
.lx-qs__form { display: grid; gap: 6px; margin: 0 10px; }
.lx-qs__field {
  display: flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px #ececef; font: 400 9.5px/1 var(--font-ui); color: #9aa1ad;
}
.lx-qs__form .lx-qs__btn { margin: 2px 0 0; }
.lx-qs__trust {
  display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 3px;
  font: 400 8.5px/1.3 var(--font-ui); color: #6b7280; white-space: nowrap;
}
.lx-qs__trust svg { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.lx-qs__btn { background: color-mix(in srgb, var(--pv-accent) 9%, #fff); color: color-mix(in srgb, var(--pv-accent) 82%, #0b1220); }
.lx-qs__btn--go { background: color-mix(in srgb, var(--pv-accent) 90%, #fff); color: #fff; }

.lx-link {
  align-self: start; display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 118px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px #e4e4e8;
}
.lx-link svg { width: 12px; height: 12px; fill: none; stroke: #0b1220; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lx-branch {
  position: absolute; left: 20px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 6px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px #e4e4e8;
  font: 400 10px/1 var(--font-ui); color: #6b7280; white-space: nowrap;
}
.lx-branch b { padding: 4px 7px; border-radius: 999px; background: #f6f6f8; color: #0b1220; font-weight: 600; }
.lx-branch svg { width: 11px; height: 11px; fill: none; stroke: #9aa1ad; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lx-skel--flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 38px; align-content: start; padding: 22px 20px; }
.lx-skel__step { display: grid; gap: 10px; align-content: start; padding: 14px 12px; border-radius: 14px; background: #fff; }
.lx-skel__step i { height: 10px; }
.lx-skel__step .lx-skel__bar { height: 4px; }
.lx-skel__step .lx-skel__box { height: 52px; border-radius: 10px; }

@container (max-width: 640px) {
  .lx-flow { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); padding: 16px 14px 60px; }
  .lx-flow > :nth-child(n+4):not(.lx-branch) { display: none; }
  .lx-skel--flow { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 14px; }
  .lx-skel__step:nth-child(3) { display: none; }
  .lx-branch { left: 14px; }
}
@container (max-width: 380px) {
  .lx-flow { grid-template-columns: minmax(0, 1fr); }
  .lx-flow > :nth-child(n+2):not(.lx-branch) { display: none; }
  .lx-skel--flow { grid-template-columns: minmax(0, 1fr); }
  .lx-skel__step:nth-child(2) { display: none; }
}