@font-face {
  font-family: "Kingnam Bobo";
  src: url("./assets/kingnam-bobo-bold-web-subset.ttf?v=20260928-labels") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color: #000;
  background: #fdf7e8;
  font-family: "Kingnam Bobo", "荆南波波黑", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --stage-width: 1440px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #fdf7e8;
}

.world {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: #fdf7e8 url("./assets/llk-website-background-desktop.webp") right bottom / cover no-repeat;
}

.design-stage {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: var(--stage-width);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.brand {
  position: fixed;
  z-index: 3;
  top: max(32px, env(safe-area-inset-top));
  left: max(32px, env(safe-area-inset-left));
  width: 146px;
  height: 48px;
  margin: 0;
}

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

.hero { position: absolute; inset: 0; }

h1 {
  position: absolute;
  top: 29.62963%;
  left: 25%;
  width: 50%;
  height: 12.839506%;
  margin: 0;
}

h1 img { display: block; width: 100%; height: 100%; object-fit: contain; }
.headline-mobile { display: none; }

.downloads {
  position: absolute;
  top: 48.395062%;
  left: 50%;
  transform: translateX(-50%);
}

.download-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.download {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 207px;
  height: 56px;
  padding: 16px 32px;
  border: 0;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 8px 8px rgb(0 0 0 / 4%);
  color: #000;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.download--windows { width: 207px; }
.download--android { width: 199px; }
.download-icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.download-icon--current { display: none; }
.download.is-current .download-icon--normal { display: none; }
.download.is-current .download-icon--current { display: block; }
.download.is-current { background: #000; box-shadow: 0 8px 8px rgb(0 0 0 / 20%); color: #fff; }
.download:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgb(0 0 0 / 20%); }
.download:focus-visible { outline: 3px solid #000; outline-offset: 5px; }

.download-status {
  position: static;
  width: min(430px, 80vw);
  min-height: 20px;
  margin: 24px auto 0;
  font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  color: #514b40;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}
.download-status:empty { visibility: hidden; }

.no-script { margin-top: 12px; font-size: 14px; text-align: center; }
.features { position: absolute; z-index: 100; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.feature {
  --feature-clamp-x: 0px;
  --feature-clamp-y: 0px;
  --feature-edge-scale: 1;
  --pill-collapsed-height: calc(var(--stage-width) * .029166667);
  --pill-expanded-height: calc(var(--stage-width) * .0875);
  --pill-detail-height: calc(var(--stage-width) * .041666667);
  --pill-expanded-padding-y: calc(var(--stage-width) * .011111111);
  --pill-expanded-padding-right: calc(var(--stage-width) * .016666667);
  --pill-expanded-padding-left: calc(var(--stage-width) * .013888889);
  --pill-expanded-gap: calc(var(--stage-width) * .005555556);
  --pill-detail-font-size: calc(var(--stage-width) * .009722222);
  --pill-detail-line-height: calc(var(--stage-width) * .013888889);
  --pill-expanded-shadow: 0 calc(var(--stage-width) * .005555556) calc(var(--stage-width) * .016666667) rgb(0 0 0 / 12%);
  position: absolute;
  top: var(--feature-top);
  left: var(--feature-left);
  display: grid;
  place-content: center;
  place-items: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: transform 320ms ease-in-out;
}
.feature:hover,
.feature:focus-within {
  z-index: 1;
  transform: translate3d(var(--feature-clamp-x), var(--feature-clamp-y), 0) scale(var(--feature-edge-scale));
}
.feature-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--pill-collapsed-width);
  height: var(--pill-collapsed-height);
  padding: calc(var(--stage-width) * .005555556) calc(var(--stage-width) * .0125) calc(var(--stage-width) * .005555556) calc(var(--stage-width) * .009722222);
  overflow: visible;
  border-radius: calc(var(--stage-width) * .014583333);
  box-shadow: 0 calc(var(--stage-width) * .002777778) calc(var(--stage-width) * .011111111) rgb(0 0 0 / 8%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #3f3527;
  font-size: calc(var(--stage-width) * .013888889);
  font-weight: 700;
  line-height: 1.3;
  pointer-events: auto;
  white-space: nowrap;
  transform: rotate(var(--tilt));
  transform-origin: center;
  transition: width 320ms ease-in-out,
    height 320ms ease-in-out,
    padding 320ms ease-in-out,
    gap 320ms ease-in-out,
    box-shadow 320ms ease-in-out,
    -webkit-backdrop-filter 320ms ease-in-out,
    backdrop-filter 320ms ease-in-out;
  animation: drift 5.8s ease-in-out infinite;
}
.feature-pill:is(:hover, :focus-visible) {
  gap: var(--pill-expanded-gap);
  width: var(--pill-expanded-width);
  height: var(--pill-expanded-height);
  padding: var(--pill-expanded-padding-y) var(--pill-expanded-padding-right) var(--pill-expanded-padding-y) var(--pill-expanded-padding-left);
  box-shadow: var(--pill-expanded-shadow);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.feature-pill:focus-visible { outline: 3px solid #3f3527; outline-offset: 4px; }
.feature-pill-surface,
.feature-pill-inset {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.feature-pill-surface {
  z-index: 0;
  background: rgb(251 242 131 / 4%);
}
.feature-pill-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--stage-width) * .002777778);
  flex: 0 0 auto;
}
.feature-pill-icon {
  position: relative;
  width: calc(var(--stage-width) * .016666667);
  height: calc(var(--stage-width) * .016666667);
  flex: 0 0 auto;
}
.feature-pill-icon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.feature-pill-label { position: relative; flex: 0 0 auto; word-break: break-word; }
.feature-pill-detail {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  min-width: 100%;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: #3f3527;
  font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: var(--pill-detail-font-size);
  font-weight: 500;
  line-height: var(--pill-detail-line-height);
  text-align: justify;
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  pointer-events: none;
  transition: max-height 320ms ease-in-out, opacity 320ms ease-in-out;
}
.feature-pill-detail strong { color: #ff8e50; font-weight: 600; }
.feature-pill:is(:hover, :focus-visible) .feature-pill-detail {
  max-height: var(--pill-detail-height);
  opacity: 1;
}
.feature-pill-inset {
  z-index: 2;
  box-shadow: inset calc(var(--stage-width) * -.000694444) calc(var(--stage-width) * .001388889) calc(var(--stage-width) * .002083333) rgb(255 255 255 / 60%),
    inset calc(var(--stage-width) * .000694444) calc(var(--stage-width) * -.000694444) calc(var(--stage-width) * .002083333) rgb(0 0 0 / 10%);
}
.feature--simple { --tilt: -7.55deg; --feature-top: 21.975309%; --feature-left: 16.666667%; --pill-collapsed-width: calc(var(--stage-width) * .083333333); --pill-expanded-width: calc(var(--stage-width) * .180555556); width: 8.645833%; height: 7.098765%; }
.feature--free { --tilt: -4.62deg; --feature-top: 16.17284%; --feature-left: 44.583333%; --pill-collapsed-width: calc(var(--stage-width) * .106271701); --pill-expanded-width: calc(var(--stage-width) * .152777778); width: 10.902778%; height: 6.728395%; }
.feature--free .feature-pill { animation-delay: -1.2s; }
.feature--network { --tilt: 5.79deg; --feature-top: calc(56.228395% + 16px); --feature-left: 23.532639%; --pill-collapsed-width: calc(var(--stage-width) * .097222222); --pill-expanded-width: calc(var(--stage-width) * .198611111); --pill-expanded-height: calc(var(--stage-width) * .101388889); --pill-detail-height: calc(var(--stage-width) * .055555556); width: 10%; height: 6.91358%; }
.feature--network .feature-pill { animation-delay: -3.7s; }
.feature--discovery { --tilt: -6.9deg; --feature-top: calc(62.712346% + 16px); --feature-left: 56.995139%; --pill-collapsed-width: calc(var(--stage-width) * .125); --pill-expanded-width: calc(var(--stage-width) * .201388889); width: 12.777778%; height: 7.839506%; }
.feature--discovery .feature-pill { animation-delay: -2.3s; }
.feature--network .feature-pill-detail,
.feature--discovery .feature-pill-detail { font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; }
.feature--fast { --tilt: 12.13deg; --feature-top: 21.975309%; --feature-left: 72.777778%; --pill-collapsed-width: calc(var(--stage-width) * .097222222); --pill-expanded-width: calc(var(--stage-width) * .177777778); width: 10.138889%; height: 8.703704%; }
.feature--fast .feature-pill { animation-delay: -4.6s; }

.feature--free .feature-pill-inset { box-shadow: inset 0 calc(var(--stage-width) * .001388889) calc(var(--stage-width) * .002083333) rgb(255 255 255 / 60%), inset 0 calc(var(--stage-width) * -.001388889) calc(var(--stage-width) * .002083333) rgb(0 0 0 / 10%); }
.feature--network .feature-pill-inset { box-shadow: inset calc(var(--stage-width) * -.001388889) calc(var(--stage-width) * .001388889) calc(var(--stage-width) * .002083333) rgb(255 255 255 / 60%), inset 0 calc(var(--stage-width) * -.001388889) calc(var(--stage-width) * .002083333) rgb(0 0 0 / 10%); }
.feature--discovery .feature-pill-inset { box-shadow: inset calc(var(--stage-width) * .000694444) calc(var(--stage-width) * .001388889) calc(var(--stage-width) * .002083333) rgb(255 255 255 / 60%), inset calc(var(--stage-width) * -.000694444) calc(var(--stage-width) * -.001388889) calc(var(--stage-width) * .002083333) rgb(0 0 0 / 10%); }
.feature--fast .feature-pill-inset { box-shadow: inset calc(var(--stage-width) * .000694444) calc(var(--stage-width) * .001388889) calc(var(--stage-width) * .002083333) rgb(255 255 255 / 60%), inset calc(var(--stage-width) * -.000694444) calc(var(--stage-width) * -.001388889) calc(var(--stage-width) * .002083333) rgb(0 0 0 / 10%); }

@keyframes drift {
  0%, 100% { transform: translate3d(-1px, 1px, 0) rotate(calc(var(--tilt) - .7deg)); }
  25% { transform: translate3d(3px, -3px, 0) rotate(calc(var(--tilt) + .5deg)); }
  50% { transform: translate3d(-2px, -7px, 0) rotate(calc(var(--tilt) + 1.1deg)); }
  75% { transform: translate3d(2px, -2px, 0) rotate(calc(var(--tilt) - .4deg)); }
}

@media (max-width: 1079px) and (min-width: 481px) {
  /* The 1440px desktop design is the reference size at the 1080px breakpoint. */
  :root { --stage-width: calc(100vw * 1.3333333333); }
}

@media (max-width: 719px) and (min-width: 481px) {
  /* PC remains at the 720px reference scale instead of shrinking further. */
  :root { --stage-width: 960px; }
}

@media (max-width: 480px) {
  :root { --stage-width: 402px; }
  /* Keep the 402px artwork as the coordinate reference while letting its
     horizontal positions resolve against the actual Mobile viewport. */
  .design-stage { top: 0; left: 0; width: 100vw; height: 874px; aspect-ratio: auto; transform: none; }
  .brand { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); width: 98px; height: 32px; }
  .world {
    background-image: url("./assets/llk-website-background-mobile.webp");
    background-position: right bottom;
  }
  h1 { top: 220px; left: 50%; width: 70vw; height: 104px; transform: translateX(-50%); }
  .headline-desktop { display: none; }
  .headline-mobile { display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; height: 100%; filter: drop-shadow(0 8px 8px #0000001f); }
  /* Exact transparent exports of Figma nodes 20409:143669 and 20409:143670.
     Keeping natural sizes avoids client-side font-rendering differences. */
  .headline-mobile-image { display: block; flex: 0 0 auto; max-width: none; }
  .headline-mobile-image--top { align-self: flex-start; width: 206px; height: 44px; }
  .headline-mobile-image--bottom { align-self: flex-end; width: 282px; height: 62px; }
  .downloads { top: 400px; left: calc(50% + .5px); width: 402px; }
  .download-options { flex-direction: column; gap: 24px; width: 100%; padding: 0; }
  .download { width: 207px; height: 56px; padding: 16px 32px; font-size: 16px; }
  .download--android { width: 199px; }
  .download-icon { width: 24px; height: 24px; }
  .download-status { font-size: 12px; white-space: normal; }
  .feature {
    --pill-collapsed-height: 42px;
    --pill-expanded-height: 126px;
    --pill-detail-height: 60px;
    --pill-expanded-padding-y: 16px;
    --pill-expanded-padding-right: 24px;
    --pill-expanded-padding-left: 20px;
    --pill-expanded-gap: 8px;
    --pill-detail-font-size: 14px;
    --pill-detail-line-height: 20px;
    --pill-expanded-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  }
  .feature-pill { padding: 8px 18px 8px 14px; border-radius: 21px; font-size: 20px; box-shadow: 0 4px 16px rgb(0 0 0 / 8%); }
  .feature-pill-content { gap: 4px; }
  .feature-pill-icon { width: 24px; height: 24px; }
  .feature-pill-inset { box-shadow: inset -1px 2px 3px rgb(255 255 255 / 60%), inset 1px -1px 3px rgb(0 0 0 / 10%); }
  .feature--free .feature-pill-inset { box-shadow: inset 0 2px 3px rgb(255 255 255 / 60%), inset 0 -2px 3px rgb(0 0 0 / 10%); }
  .feature--network .feature-pill-inset { box-shadow: inset -2px 2px 3px rgb(255 255 255 / 60%), inset 0 -2px 3px rgb(0 0 0 / 10%); }
  .feature--discovery .feature-pill-inset,
  .feature--fast .feature-pill-inset { box-shadow: inset 1px 2px 3px rgb(255 255 255 / 60%), inset -1px -1px 3px rgb(0 0 0 / 10%); }
  /* These are the Figma wrapper left edges divided by the 402px artboard
     width. The pills keep their designed size, while x follows every Mobile
     viewport proportionally: 16/402, 37/402, 31/402, 186/402, 244/402. */
  .feature--simple { --pill-collapsed-width: 120px; --pill-expanded-width: 260px; top: 323px; left: 3.9800995%; width: 124.479px; height: 57.406px; }
  .feature--free { --pill-collapsed-width: 153.031px; --pill-expanded-width: 220px; top: 116px; left: 9.2039801%; width: 156.885px; height: 54.28px; }
  .feature--network { --pill-collapsed-width: 140px; --pill-expanded-width: 286px; --pill-expanded-height: 146px; --pill-detail-height: 80px; top: var(--mobile-lower-feature-top, 577px); left: 7.7114428%; width: 143.525px; height: 55.919px; }
  .feature--discovery { --pill-collapsed-width: 180px; --pill-expanded-width: 290px; top: calc(var(--mobile-lower-feature-top, 577px) + 56px); left: 46.2686567%; width: 183.742px; height: 63.317px; }
  .feature--fast { --pill-collapsed-width: 140px; --pill-expanded-width: 256px; top: 165px; left: 60.6965174%; width: 145.699px; height: 70.478px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .feature-pill { transform: rotate(var(--tilt)); }
}