:root{
  --bg:#070812;
  --fg:#EDEEF3;
  --muted:rgba(237,238,243,.68);
  --line:rgba(255,255,255,.12);
  --hot:#F0127B;
  --cold:#21E6FF;
  --acid:#B6FF3B;
  --gold:#FFD36A;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --pad:clamp(18px,3vw,34px);
  --max:1200px;
  --px:0;
  --py:0;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 40% 10%, rgba(33,230,255,.20), transparent 55%),
    radial-gradient(900px 700px at 70% 25%, rgba(240,18,123,.20), transparent 55%),
    radial-gradient(900px 700px at 40% 95%, rgba(182,255,59,.10), transparent 55%),
    var(--bg);
  color:var(--fg);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.2px;
  overflow-x:hidden;
}
body.is-navOpen{overflow:hidden}
body.is-bgOnly{overflow:hidden}

a{color:inherit;text-decoration:none}
button,input{font:inherit}

.fx{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-1;
}
.fx__canvas{width:100%;height:100%;display:block}
.fx__vignette{
  position:absolute; inset:-20%;
  background:radial-gradient(closest-side at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%);
  transform:translateZ(0);
}
.fx__grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.35;
}

.top{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px var(--pad);
  z-index:50;
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(7,8,18,.85), rgba(7,8,18,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{display:flex;align-items:center;gap:12px;min-width:200px}
.brand__mark{
  width:18px;height:18px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.brand__logo{
  width:18px;height:18px;
  display:block;
  filter:drop-shadow(0 0 18px rgba(33,230,255,.20));
}
.brand__name{font-weight:720;letter-spacing:.6px}
.brand__hint{font-size:12px;color:rgba(255,255,255,.58);text-transform:uppercase;letter-spacing:1.6px}

.top__right{display:flex;align-items:center;gap:12px}
.navTrigger{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--fg);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.navTrigger:active{transform:translateY(1px) scale(.98)}
.navTrigger:hover{border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.28)}
.navTrigger__dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.70);
  box-shadow:0 0 14px rgba(255,255,255,.18);
}
.navTrigger__label{font-size:13px;color:rgba(255,255,255,.82)}

.topCta{
  position:relative;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(33,230,255,.32);
  background:linear-gradient(180deg, rgba(33,230,255,.14), rgba(240,18,123,.10));
  overflow:hidden;
}
.topCta.topCta--secondary{
  border-color:rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
}
.topCta.topCta--secondary .topCta__glow{
  opacity:.65;
}
.topCta__glow{
  position:absolute; inset:-40%;
  background:radial-gradient(circle at 40% 30%, rgba(33,230,255,.45), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(240,18,123,.35), transparent 55%);
  transform:translate(calc(var(--px) * 1px), calc(var(--py) * 1px));
  transition:transform .18s ease;
  filter:blur(18px);
}

.orbit{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(1.02);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:80;
}
.orbit.is-open{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.orbit::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,.78));
  backdrop-filter:blur(20px);
}
.orbit__close{
  position:absolute;
  top:20px; right:20px;
  width:48px;height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  cursor:pointer;
}
.orbit__close::before,.orbit__close::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:22px;height:2px;
  background:rgba(255,255,255,.85);
  transform-origin:center;
}
.orbit__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.orbit__close::after{transform:translate(-50%,-50%) rotate(-45deg)}

.orbit__core{
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(33,230,255,.25), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(240,18,123,.22), transparent 55%),
             rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 30px 90px rgba(0,0,0,.65);
  position:relative;
}
.orbit__core::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:50%;
  background:conic-gradient(from 200deg, rgba(33,230,255,.7), rgba(240,18,123,.65), rgba(182,255,59,.55), rgba(33,230,255,.7));
  filter:blur(18px);
  opacity:.35;
  z-index:-1;
}
.orbit__item{
  position:absolute;
  width:86px;height:86px;
  border-radius:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  transform:translate(-50%,-50%) translate(var(--ox), var(--oy)) rotate(var(--rot));
  top:50%; left:50%;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
  overflow:hidden;
}
.orbit__item::before{
  content:"";
  position:absolute; inset:-30%;
  background:radial-gradient(circle at 30% 30%, rgba(33,230,255,.35), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(240,18,123,.30), transparent 55%);
  filter:blur(16px);
  opacity:.8;
}
.orbit__item:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
  transform:translate(-50%,-50%) translate(var(--ox), var(--oy)) rotate(var(--rot)) scale(1.04);
}
.orbit__item.is-active{
  border-color:rgba(33,230,255,.36);
  box-shadow:0 0 0 1px rgba(33,230,255,.18), 0 18px 50px rgba(0,0,0,.65);
}
.orbit__item.is-active::before{opacity:1}
.orbit__labels{
  position:absolute;
  top:50%; left:50%;
  width:1px;height:1px;
}
.orbit__label{
  position:absolute;
  transform:translate(-50%,-50%) translate(var(--lx), var(--ly));
  font-size:13px;
  letter-spacing:1px;
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
}
.orbit__label.is-active{color:rgba(33,230,255,.92);text-shadow:0 0 18px rgba(33,230,255,.18)}

.hero{
  min-height:100vh;
  padding:calc(86px + var(--pad)) var(--pad) var(--pad);
  display:flex;
  align-items:center;
  position:relative;
}
.hero__frame{
  width:min(var(--max), 100%);
  margin:0 auto;
  display:flex;
  gap:clamp(18px,4vw,48px);
  align-items:stretch;
  justify-content:space-between;
}
.hero__copy{flex:1 1 560px;max-width:640px}
.hero__kicker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.84);
}
.chip--hot{border-color:rgba(240,18,123,.36);box-shadow:0 0 28px rgba(240,18,123,.12) inset}
.chip--cold{border-color:rgba(33,230,255,.36);box-shadow:0 0 28px rgba(33,230,255,.12) inset}
.hero__title{font-size:clamp(42px, 5vw, 68px);line-height:1.02;margin:0 0 16px}
.hero__titleLine{display:block}
.hero__titleLine--cut{
  background:linear-gradient(90deg, var(--cold), var(--hot), var(--acid));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 50px rgba(33,230,255,.10);
}
.hero__desc{margin:0 0 22px;color:var(--muted);font-size:clamp(15px,1.6vw,18px);line-height:1.6}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
  user-select:none;
}
.cta:active{transform:translateY(1px) scale(.99)}
.cta--primary{
  border-color:rgba(33,230,255,.40);
  background:linear-gradient(135deg, rgba(33,230,255,.25), rgba(240,18,123,.14));
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.cta--ghost{
  background:rgba(0,0,0,.18);
}
.cta--wide{width:100%}
.cta__shine{
  position:absolute; inset:-1px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(33,230,255,.0), rgba(33,230,255,.30), rgba(240,18,123,.22), rgba(33,230,255,.0));
  opacity:.0;
  transform:translateX(-50%);
  transition:opacity .2s ease, transform .6s ease;
  pointer-events:none;
}
.cta--primary:hover .cta__shine{
  opacity:.9;
  transform:translateX(50%);
}

.hero__meta{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.metaCard{
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  min-width:110px;
}
.metaCard__t{font-size:12px;color:rgba(255,255,255,.70)}
.metaCard__v{font-weight:720;font-size:18px;letter-spacing:.6px}

.hero__art{
  flex:1 1 520px;
  min-height:520px;
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
  overflow:hidden;
  box-shadow:var(--shadow);
}
.orb{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform:translate(calc(var(--px) * 0.2px), calc(var(--py) * 0.2px));
  transition:transform .12s ease;
}
.orb__layer{
  position:absolute;
  width:74%;
  aspect-ratio:1/1;
  border-radius:50%;
  filter:blur(18px);
  opacity:.92;
  mix-blend-mode:screen;
}
.orb__layer--a{background:radial-gradient(circle at 30% 30%, rgba(33,230,255,.62), transparent 60%)}
.orb__layer--b{background:radial-gradient(circle at 70% 60%, rgba(240,18,123,.58), transparent 62%);transform:translate(40px, -20px)}
.orb__layer--c{background:radial-gradient(circle at 40% 70%, rgba(182,255,59,.46), transparent 64%);transform:translate(-30px, 28px)}
.hero__illus{
  position:absolute;
  inset:-8% -10% auto auto;
  width:min(740px, 110%);
  opacity:.92;
  transform:translate(calc(var(--px) * 0.12px), calc(var(--py) * 0.12px)) rotate(-10deg);
  transition:transform .18s ease;
}
.hero__scan{
  position:absolute;
  inset:-40% -20%;
  background:linear-gradient(120deg, rgba(255,255,255,.0), rgba(255,255,255,.16), rgba(255,255,255,.0));
  transform:translateX(-60%) rotate(-12deg);
  animation:scan 7.6s linear infinite;
  opacity:.35;
}
@keyframes scan{
  0%{transform:translateX(-70%) rotate(-12deg)}
  100%{transform:translateX(70%) rotate(-12deg)}
}
.hero__scrollHint{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.70);
  font-size:12px;
}
.scrollPill{
  width:26px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.14);
}
.scrollPill__dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.80);
  animation:dot 1.4s ease-in-out infinite;
}
@keyframes dot{
  0%,100%{transform:translateY(-6px);opacity:.55}
  50%{transform:translateY(6px);opacity:1}
}

.lab,.story,.drops,.ship{
  padding:calc(var(--pad) * 1.2) var(--pad);
}
.drops,.ship{
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}
.lab__head,.story__head,.drops__head,.ship__head{
  width:min(var(--max), 100%);
  margin:0 auto 22px;
}
.h2{margin:0;font-size:clamp(28px,3.2vw,42px);letter-spacing:.3px}
.sub{margin:10px 0 0;color:var(--muted);line-height:1.6}

.lab__stage{
  width:min(var(--max), 100%);
  margin:0 auto;
  display:flex;
  gap:clamp(16px,3vw,32px);
  align-items:stretch;
}
.preview{
  flex:1 1 520px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.preview__shell{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  transform:perspective(900px) rotateX(calc(var(--py) * -0.05deg)) rotateY(calc(var(--px) * 0.05deg));
  transition:transform .18s ease;
}
.preview__face{
  width:min(440px, 86%);
  aspect-ratio:16/10;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(33,230,255,.26), transparent 60%),
    radial-gradient(420px 240px at 80% 70%, rgba(240,18,123,.22), transparent 60%),
    var(--base, #0B0D12);
  box-shadow:0 26px 80px rgba(0,0,0,.60);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.preview__face::before{
  content:"";
  position:absolute; inset:-30%;
  background:conic-gradient(from 120deg, rgba(33,230,255,.12), rgba(240,18,123,.10), rgba(182,255,59,.10), rgba(33,230,255,.12));
  opacity:.7;
  filter:blur(22px);
  transform:translate(calc(var(--px) * 0.2px), calc(var(--py) * 0.2px));
  z-index:0;
}
.preview__face::after{
  content:"";
  position:absolute; inset:0;
  background:var(--pattern, none);
  opacity:.22;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}
.preview[data-card-theme="liucai"] .preview__face::after{
  opacity:.60;
  mix-blend-mode:normal;
}
.card__foil{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(780px 420px at calc(50% + var(--px) * 1.2px) calc(35% + var(--py) * -0.9px), rgba(255,211,106,.26), transparent 60%),
    linear-gradient(125deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%, rgba(33,230,255,.14) 60%, rgba(255,255,255,0) 100%);
  opacity:.62;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}
.preview[data-card-theme="liucai"] .card__foil{
  background:
    radial-gradient(780px 420px at calc(50% + var(--px) * 1.2px) calc(35% + var(--py) * -0.9px), rgba(202,138,4,.22), transparent 62%),
    linear-gradient(125deg, rgba(202,138,4,.22), rgba(255,255,255,0) 36%, rgba(202,138,4,.14) 58%, rgba(255,255,255,0) 100%);
  opacity:.85;
  mix-blend-mode:multiply;
}
.card__foil::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(0,0,0,.28) inset, 0 18px 44px rgba(0,0,0,.35) inset;
  opacity:.95;
}
.preview[data-card-theme="liucai"] .card__foil::before{
  border-color:rgba(12,10,9,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset, 0 18px 44px rgba(12,10,9,.08) inset;
}
.card__content{
  position:absolute;
  inset:0;
  padding:22px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:14px;
  z-index:1;
}
.card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.card__company{
  font-size:12px;
  font-weight:720;
  letter-spacing:2.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,.84);
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card__tag{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.78);
  white-space:nowrap;
}
.card__main{
  align-self:center;
}
.card__name{
  font-size:clamp(22px,3.1vw,34px);
  font-weight:780;
  letter-spacing:1.4px;
  background:linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,211,106,.82), rgba(33,230,255,.70));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 30px rgba(255,211,106,.10);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:82%;
}
.card__title{
  margin-top:6px;
  font-size:13px;
  letter-spacing:1.2px;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:82%;
}
.card__lines{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:calc(100% - 76px);
}
.card__line{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.card__k{
  width:20px;
  font-size:10px;
  letter-spacing:2px;
  color:rgba(255,255,255,.76);
  padding:5px 6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.16);
  text-align:center;
  flex:0 0 auto;
}
.card__v{
  font-size:12px;
  letter-spacing:.4px;
  color:rgba(255,255,255,.82);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.card__qr{
  position:absolute;
  right:18px;
  bottom:18px;
  width:58px;
  aspect-ratio:1/1;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, rgba(255,255,255,0) 1px 6px);
  opacity:1;
  box-shadow:0 20px 60px rgba(0,0,0,.40);
}
.preview__badge{
  position:absolute; top:18px; left:18px;
  padding:8px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.20);
}
.preview__title{
  position:absolute; bottom:18px; left:18px;
  font-size:14px;
  letter-spacing:2px;
  color:rgba(255,255,255,.76);
  text-transform:uppercase;
}
.preview__engrave{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(18px,2.6vw,30px);
  font-weight:720;
  letter-spacing:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.86), rgba(33,230,255,.70), rgba(240,18,123,.66));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 28px rgba(33,230,255,.10);
  white-space:nowrap;
  max-width:82%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.controls{
  flex:1 1 420px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.controls__group{display:flex;flex-direction:column;gap:10px}
.controls__label{font-size:13px;color:rgba(255,255,255,.76);letter-spacing:1px;text-transform:uppercase}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-size:12px;color:rgba(255,255,255,.72);letter-spacing:.6px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{
  width:38px;height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--c, #0B0D12);
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, filter .14s ease;
  box-shadow:0 16px 40px rgba(0,0,0,.30);
}
.swatch[data-theme="liucai"]{
  background:
    radial-gradient(14px 14px at 22% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    radial-gradient(16px 16px at 78% 26%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%),
    radial-gradient(60px 32px at 70% 38%, rgba(255,92,172,.55), rgba(255,92,172,0) 72%),
    radial-gradient(64px 34px at 30% 72%, rgba(80,220,255,.48), rgba(80,220,255,0) 72%),
    radial-gradient(56px 30px at 72% 76%, rgba(168,109,255,.42), rgba(168,109,255,0) 72%),
    conic-gradient(from 220deg, rgba(202,138,4,.55), rgba(255,255,255,0), rgba(202,138,4,.35), rgba(255,255,255,0), rgba(202,138,4,.55)),
    linear-gradient(180deg, #FFFFFF, #F8FAFC);
  border-color:rgba(255,255,255,.22);
}
.swatch:hover{transform:translateY(-1px) scale(1.02);border-color:rgba(255,255,255,.22);filter:saturate(1.2)}
.swatch.is-active{outline:2px solid rgba(33,230,255,.55);outline-offset:2px}

.toggles{display:flex;flex-wrap:wrap;gap:10px}
.toggle{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.82);
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.toggle:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.28)}
.toggle.is-active{border-color:rgba(240,18,123,.42);box-shadow:0 0 28px rgba(240,18,123,.12) inset}

.inputWrap{display:flex;gap:10px}
.input{
  flex:1;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  outline:none;
}
.input option,
.input optgroup{
  color:#0B0D12;
  background:#FFFFFF;
}
.input:focus{border-color:rgba(33,230,255,.48);box-shadow:0 0 0 4px rgba(33,230,255,.12)}
.inputBtn{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  cursor:pointer;
}

.controls__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.story{position:relative}
.stream{
  width:min(var(--max), 100%);
  margin:0 auto;
  position:relative;
  padding:10px 0 34px;
}
.beat{
  position:relative;
  margin:0 0 18px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  padding:18px;
  max-width:min(760px, 96%);
  transform:translateX(var(--dx)) rotate(var(--dr));
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.beat__num{
  font-weight:720;
  letter-spacing:2px;
  color:rgba(255,255,255,.70);
}
.beat__title{margin:8px 0 8px;font-size:22px}
.beat__desc{margin:0;color:var(--muted);line-height:1.6}
.beat--a{--dx:0px;--dr:-1.2deg}
.beat--b{--dx:160px;--dr:1.4deg}
.beat--c{--dx:48px;--dr:-.8deg}
.beat--d{--dx:200px;--dr:1.0deg}
.beat.is-active{border-color:rgba(33,230,255,.26);background:rgba(33,230,255,.05)}

.story__meter{
  position:fixed;
  top:50%;
  right:var(--pad);
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.62);
  transform:translateY(-50%);
}
.meter{
  width:8px;
  height:180px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  overflow:hidden;
}
.meter__bar{
  width:100%;
  height:0%;
  background:linear-gradient(180deg, var(--cold), var(--hot), var(--acid));
  border-radius:999px;
}
.meter__label{font-size:11px;letter-spacing:2px;text-transform:uppercase}

.drops{position:relative}
.gallery{
  width:min(var(--max), 100%);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:stretch;
}
.tile{
  flex:1 1 210px;
  min-height:160px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(400px 260px at 30% 20%, rgba(33,230,255,.20), transparent 55%),
    radial-gradient(400px 260px at 80% 70%, rgba(240,18,123,.18), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  padding:18px;
  text-align:left;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.tile:hover{
  transform:translateY(-2px) rotate(.3deg);
  border-color:rgba(255,255,255,.18);
  background:
    radial-gradient(400px 260px at 30% 20%, rgba(182,255,59,.18), transparent 55%),
    radial-gradient(400px 260px at 80% 70%, rgba(33,230,255,.22), transparent 55%),
    rgba(255,255,255,.04);
}
.tile__t{display:block;font-weight:720;letter-spacing:1px}
.tile__s{display:block;margin-top:10px;color:rgba(255,255,255,.62);letter-spacing:2px;text-transform:uppercase}

.ship__cards{
  width:min(var(--max), 100%);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.shipCard{
  flex:1 1 260px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  padding:18px;
}
.shipCard__k{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.68)}
.shipCard__v{margin-top:10px;font-size:18px;font-weight:720}
.shipCard__d{margin-top:10px;color:var(--muted);line-height:1.6}

.footer{
  width:min(var(--max), 100%);
  margin:26px auto 0;
  padding-bottom:16px;
}
.footer__line{height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent)}
.footer__meta{display:flex;justify-content:space-between;gap:10px;margin-top:14px;color:rgba(255,255,255,.62);font-size:12px}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  color:rgba(255,255,255,.86);
  box-shadow:0 18px 60px rgba(0,0,0,.60);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

body.is-bgOnly main{display:none}
body.is-bgOnly .brand{display:none}
body.is-bgOnly #bgTrigger{display:none}
body.is-bgOnly #bgPicker{display:none}
body.is-bgOnly .toast{display:none}
body.is-bgOnly .top{
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
  padding:0;
  pointer-events:none;
}
body.is-bgOnly .top__right{
  position:fixed;
  top:14px;
  right:var(--pad);
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  transform:translateY(0);
  opacity:1;
  transition:opacity .25s ease, transform .25s ease;
}
body.is-bgOnly.is-bgIdle .top__right{
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
}
.bgOnlyPanel{
  display:none;
  width:min(320px, calc(100vw - var(--pad) * 2));
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}
.bgOnlyFireworks,.bgOnlySnow{display:none}
body.is-bgOnly[data-bg="fireworks"] .bgOnlyPanel,
body.is-bgOnly[data-bg="snow"] .bgOnlyPanel{display:grid;gap:10px}
body.is-bgOnly[data-bg="fireworks"] .bgOnlyFireworks{display:grid;gap:10px}
body.is-bgOnly[data-bg="snow"] .bgOnlySnow{display:grid;gap:10px}
.bgSnowDial{
  width:100%;
  height:124px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  touch-action:none;
}
.bgSnowDial:focus-visible{
  outline:3px solid rgba(255,255,255,.18);
  outline-offset:3px;
}
.bgSnowDial__ring{
  position:absolute;
  width:92px;height:92px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 6px rgba(0,0,0,.16) inset;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    repeating-conic-gradient(from -90deg, rgba(255,255,255,.10) 0 2deg, rgba(255,255,255,0) 2deg 12deg);
}
.bgSnowDial__needle{
  position:absolute;
  left:50%;top:50%;
  width:2px;
  height:44px;
  transform-origin:50% 92%;
  transform:translate(-50%,-92%) rotate(var(--dir, 180deg));
  background:rgba(255,255,255,.86);
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(0,0,0,.22);
}
.bgSnowDial__center{
  position:absolute;
  left:50%;top:50%;
  width:10px;height:10px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(0,0,0,.18);
}
.bgOnlyInput{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  letter-spacing:.6px;
  outline:none;
}
.bgOnlyInput::placeholder{color:rgba(255,255,255,.55)}
.bgOnlyInput:focus{
  border-color:rgba(255,255,255,.34);
  box-shadow:0 0 0 4px rgba(255,255,255,.12);
}
.bgOnlyColorRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.bgColorBtn{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  cursor:pointer;
}
.bgColorBtn:focus-visible{
  outline:3px solid rgba(255,255,255,.18);
  outline-offset:3px;
}
.bgColorSwatch{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:conic-gradient(from 210deg, rgba(255,92,172,.85), rgba(80,220,255,.85), rgba(255,200,106,.85), rgba(168,109,255,.85), rgba(255,92,172,.85));
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
  flex:none;
}
.bgColorLabel{font-weight:700}
.bgColorHint{
  margin-left:auto;
  font-size:12px;
  color:rgba(255,255,255,.70);
}
.bgColorPicker{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.bgColorRandom{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  cursor:pointer;
  white-space:nowrap;
}
.bgColorRandom:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.bgColorRandom:focus-visible{
  outline:3px solid rgba(255,255,255,.18);
  outline-offset:3px;
}
.bgOnlyCtl{
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.bgOnlyCtl--row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bgCtlHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.bgCtlVal{
  font-size:12px;
  color:rgba(255,255,255,.72);
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
}
.bgCtlSlider{
  width:100%;
  accent-color:rgba(255,255,255,.86);
}
.bgCtlRight{
  display:flex;
  align-items:center;
  gap:8px;
}
.bgCtlNumber{
  width:74px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  outline:none;
}
.bgCtlNumber:focus{
  border-color:rgba(255,255,255,.34);
  box-shadow:0 0 0 4px rgba(255,255,255,.12);
}
.bgCtlUnit{color:rgba(255,255,255,.68);font-size:12px}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(-6px)}

:root{
  --bg:#FAFAF9;
  --fg:#0C0A09;
  --muted:rgba(12,10,9,.68);
  --line:rgba(12,10,9,.12);
  --hot:#CA8A04;
  --cold:#1C1917;
  --acid:#44403C;
  --gold:#CA8A04;
  --shadow:0 18px 50px rgba(12,10,9,.12);
}

body{
  background:
    radial-gradient(1000px 700px at 18% 0%, rgba(202,138,4,.14), transparent 55%),
    radial-gradient(900px 600px at 82% 12%, rgba(28,25,23,.10), transparent 58%),
    radial-gradient(1000px 700px at 40% 100%, rgba(68,64,60,.08), transparent 58%),
    var(--bg);
  color:var(--fg);
  font-family:"DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.fx__vignette{
  background:radial-gradient(closest-side at 50% 40%, transparent 58%, rgba(12,10,9,.14) 100%);
}
.fx__grain{
  mix-blend-mode:multiply;
  opacity:.18;
}

.top{
  backdrop-filter:blur(18px);
  background:linear-gradient(to bottom, rgba(250,250,249,.82), rgba(250,250,249,.58));
  border-bottom:1px solid rgba(12,10,9,.10);
}
.brand__mark{
  box-shadow:0 0 0 6px rgba(12,10,9,.04), 0 0 26px rgba(202,138,4,.16);
}
.brand__hint{color:rgba(12,10,9,.55)}

.topCta{
  border:1px solid rgba(202,138,4,.35);
  background:linear-gradient(180deg, rgba(202,138,4,.16), rgba(12,10,9,.02));
}
.topCta:hover{border-color:rgba(202,138,4,.55)}
.topCta:focus-visible{
  outline:3px solid rgba(202,138,4,.30);
  outline-offset:3px;
}
.topCta__glow{
  background:radial-gradient(circle at 40% 30%, rgba(202,138,4,.26), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(12,10,9,.10), transparent 55%);
  filter:blur(20px);
}

.bgPicker{
  position:fixed;
  inset:0;
  display:none;
  z-index:120;
}
.bgPicker.is-open{display:block}
.bgPicker__backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(900px 600px at 50% 40%, rgba(12,10,9,.22), rgba(12,10,9,.55));
  backdrop-filter:blur(16px);
}
.bgPicker__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(640px, calc(100% - var(--pad) * 2));
  border-radius:22px;
  border:1px solid rgba(12,10,9,.14);
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 100px rgba(12,10,9,.18);
  overflow:hidden;
}
.bgPicker__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(12,10,9,.10);
}
.bgPicker__title{
  font-weight:750;
  letter-spacing:-.2px;
  color:rgba(12,10,9,.92);
}
.bgPicker__close{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.72);
  cursor:pointer;
  position:relative;
}
.bgPicker__close::before,.bgPicker__close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:2px;
  background:rgba(12,10,9,.82);
  transform-origin:center;
}
.bgPicker__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.bgPicker__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.bgPicker__close:focus-visible{
  outline:3px solid rgba(202,138,4,.30);
  outline-offset:3px;
}

.bgPicker__grid{
  padding:16px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.bgOpt{
  text-align:left;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.72);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  box-shadow:0 14px 44px rgba(12,10,9,.10);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.bgOpt:hover{
  transform:translateY(-2px);
  border-color:rgba(12,10,9,.18);
  background:rgba(255,255,255,.84);
  box-shadow:0 18px 66px rgba(12,10,9,.14);
}
.bgOpt:active{transform:translateY(1px)}
.bgOpt:focus-visible{
  outline:3px solid rgba(202,138,4,.30);
  outline-offset:3px;
}
.bgOpt.is-active{
  border-color:rgba(202,138,4,.55);
  box-shadow:0 0 0 4px rgba(202,138,4,.14), 0 18px 66px rgba(12,10,9,.12);
}
.bgOpt__k{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.70);
  color:rgba(12,10,9,.70);
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  white-space:nowrap;
}
.bgOpt__t{
  font-weight:780;
  letter-spacing:-.2px;
  color:rgba(12,10,9,.92);
  font-size:18px;
  margin-left:auto;
}

@media (max-width: 560px){
  .bgPicker__grid{grid-template-columns:1fr}
}

.hero{
  padding:calc(76px + var(--pad)) var(--pad) calc(var(--pad) * 1.2);
}
.hero__inner{
  width:min(var(--max), 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(16px,3vw,34px);
  align-items:stretch;
}
.hero__copy{max-width:720px}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.66);
  color:rgba(12,10,9,.78);
  box-shadow:0 10px 30px rgba(12,10,9,.06);
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.hero__title{
  margin:18px 0 12px;
  font-size:clamp(40px, 4.6vw, 60px);
  line-height:1.02;
  letter-spacing:-.6px;
}
.hero__desc{
  margin:0;
  color:var(--muted);
  font-size:clamp(15px, 1.5vw, 18px);
  line-height:1.7;
}
.hero__actions{
  margin-top:22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(12,10,9,.14);
  background:rgba(255,255,255,.72);
  color:rgba(12,10,9,.92);
  cursor:pointer;
  user-select:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.btn:hover{border-color:rgba(12,10,9,.22);box-shadow:0 14px 40px rgba(12,10,9,.10)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primary{
  border-color:rgba(202,138,4,.55);
  background:linear-gradient(180deg, rgba(202,138,4,.98), rgba(202,138,4,.88));
  color:#fff;
  box-shadow:0 18px 44px rgba(202,138,4,.18), 0 18px 50px rgba(12,10,9,.12);
}
.btn--primary:hover{border-color:rgba(202,138,4,.76)}
.btn--ghost{
  background:rgba(255,255,255,.40);
}
.btn:focus-visible{
  outline:3px solid rgba(202,138,4,.35);
  outline-offset:3px;
}

.hero__meta{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.meta{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(12,10,9,.10);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(12,10,9,.08);
  min-width:150px;
}
.meta__k{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(12,10,9,.62);
}
.meta__v{
  margin-top:8px;
  font-weight:700;
  letter-spacing:.2px;
  color:rgba(12,10,9,.92);
}

.catalog{
  padding:calc(86px + var(--pad)) var(--pad) var(--pad);
}
.catalog__head{
  width:min(var(--max), 100%);
  margin:0 auto 22px;
}
.catalog__grid{
  width:min(var(--max), 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.productCard{
  grid-column:span 6;
  border-radius:var(--r-lg);
  border:1px solid rgba(12,10,9,.10);
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(18px);
  box-shadow:0 14px 50px rgba(12,10,9,.10);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  min-height:168px;
}
.productCard:hover{
  transform:translateY(-2px);
  border-color:rgba(12,10,9,.18);
  background:rgba(255,255,255,.66);
  box-shadow:0 18px 70px rgba(12,10,9,.14);
}
.productCard:active{transform:translateY(1px)}
.productCard:focus-visible{
  outline:3px solid rgba(202,138,4,.30);
  outline-offset:3px;
}
.productCard--off{
  cursor:default;
  opacity:.72;
}
.productCard--off:hover{
  transform:none;
  border-color:rgba(12,10,9,.10);
  background:rgba(255,255,255,.52);
  box-shadow:0 14px 50px rgba(12,10,9,.10);
}
.productCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.productCard__title{
  font-weight:750;
  letter-spacing:-.2px;
  font-size:18px;
}
.productCard__desc{
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}
.productCard__cta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.productCard__link{
  font-weight:700;
  color:rgba(12,10,9,.88);
  text-decoration:none;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.70);
  color:rgba(12,10,9,.70);
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  white-space:nowrap;
}
.pill--on{
  border-color:rgba(202,138,4,.45);
  color:rgba(202,138,4,.92);
}

.hero__showcase{
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid rgba(12,10,9,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.28));
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:420px;
}
.hero__showcase::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at 30% 30%, rgba(202,138,4,.20), transparent 58%),
             radial-gradient(circle at 70% 60%, rgba(28,25,23,.14), transparent 60%);
  filter:blur(26px);
  opacity:.9;
  transform:translate(calc(var(--px) * 0.2px), calc(var(--py) * 0.2px));
}
.heroCard{
  position:absolute;
  inset:18px;
  border-radius:22px;
  border:1px solid rgba(12,10,9,.10);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 60px rgba(12,10,9,.12);
  overflow:hidden;
}
.heroCard__top{
  display:flex;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(12,10,9,.08);
}
.heroCard__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(12,10,9,.14);
}
.heroCard__line{
  height:12px;
  margin:18px 16px 0;
  border-radius:999px;
  background:rgba(12,10,9,.08);
}
.heroCard__line--a{width:62%}
.heroCard__line--b{width:78%}
.heroCard__line--c{width:54%}

.lab{padding:calc(var(--pad) * 1.2) var(--pad)}
.top + main > .lab:first-child{
  padding-top:calc(86px + var(--pad));
}
.lab__head{margin:0 auto 22px}
.h2{letter-spacing:-.3px}
.sub{color:var(--muted)}

.preview,.controls{
  border:1px solid rgba(12,10,9,.10);
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}

.preview__face{
  border:1px solid rgba(12,10,9,.12);
  background:
    radial-gradient(680px 360px at 18% 12%, rgba(202,138,4,.18), transparent 62%),
    radial-gradient(460px 280px at 86% 78%, rgba(12,10,9,.12), transparent 62%),
    var(--base, #0C0A09);
  box-shadow:0 26px 80px rgba(12,10,9,.26);
}
.preview[data-card-theme="liucai"] .preview__face{
  background:
    radial-gradient(860px 420px at 20% 18%, rgba(202,138,4,.18), transparent 62%),
    radial-gradient(720px 360px at 86% 82%, rgba(80,220,255,.12), transparent 62%),
    var(--base, #F8FAFC);
  box-shadow:0 26px 80px rgba(12,10,9,.16);
}
.preview__face::before{
  background:conic-gradient(from 160deg, rgba(202,138,4,.12), rgba(12,10,9,.10), rgba(68,64,60,.10), rgba(202,138,4,.12));
  opacity:.55;
}
.preview[data-card-theme="liucai"] .preview__face::before{
  background:conic-gradient(from 160deg, rgba(202,138,4,.18), rgba(255,255,255,0), rgba(202,138,4,.10), rgba(255,255,255,0), rgba(202,138,4,.18));
  opacity:.55;
}
.card__company{color:rgba(255,255,255,.86)}
.card__title{color:rgba(255,255,255,.74)}
.card__name{
  background:linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,211,106,.88), rgba(255,255,255,.84));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.card__k{background:rgba(0,0,0,.14)}
.card__tag{background:rgba(0,0,0,.16)}
.preview[data-card-theme="liucai"] .card__company{color:rgba(12,10,9,.92)}
.preview[data-card-theme="liucai"] .card__title{color:rgba(12,10,9,.72)}
.preview[data-card-theme="liucai"] .card__name{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:rgba(12,10,9,.92);
  text-shadow:none;
}
.preview[data-card-theme="liucai"] .card__tag{
  border-color:rgba(12,10,9,.14);
  background:rgba(255,255,255,.55);
  color:rgba(12,10,9,.72);
}
.preview[data-card-theme="liucai"] .card__k{
  border-color:rgba(12,10,9,.10);
  background:rgba(255,255,255,.55);
  color:rgba(12,10,9,.70);
}
.preview[data-card-theme="liucai"] .card__v{color:rgba(12,10,9,.86)}
.preview[data-card-theme="liucai"] .card__qr{
  border-color:rgba(12,10,9,.12);
  box-shadow:0 20px 60px rgba(12,10,9,.18);
}

.controls{padding:18px}
.controls__label{color:rgba(12,10,9,.60)}
.field__label{color:rgba(12,10,9,.72)}

.input{
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.86);
  color:rgba(12,10,9,.92);
}
.input:focus{
  border-color:rgba(202,138,4,.55);
  box-shadow:0 0 0 4px rgba(202,138,4,.16);
}
.inputBtn{
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.70);
  color:rgba(12,10,9,.86);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.inputBtn:hover{border-color:rgba(12,10,9,.20);background:rgba(255,255,255,.86)}
.inputBtn:active{transform:translateY(1px)}
.inputBtn:focus-visible{
  outline:3px solid rgba(202,138,4,.30);
  outline-offset:3px;
}

.swatch{
  border:1px solid rgba(12,10,9,.12);
  box-shadow:0 14px 40px rgba(12,10,9,.10);
}
.swatch:hover{border-color:rgba(12,10,9,.22);filter:saturate(1.1)}
.swatch.is-active{outline:2px solid rgba(202,138,4,.55)}
.swatch:focus-visible{
  outline:3px solid rgba(202,138,4,.30);
  outline-offset:3px;
}
.toggle{
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.70);
  color:rgba(12,10,9,.82);
}
.toggle:hover{border-color:rgba(12,10,9,.22);background:rgba(255,255,255,.86)}
.toggle.is-active{
  border-color:rgba(202,138,4,.55);
  box-shadow:0 0 0 4px rgba(202,138,4,.12);
}
.toggle:focus-visible{
  outline:3px solid rgba(202,138,4,.30);
  outline-offset:3px;
}

.cta{
  border:1px solid rgba(12,10,9,.14);
  background:rgba(255,255,255,.72);
  color:rgba(12,10,9,.92);
}
.cta--primary{
  border-color:rgba(202,138,4,.55);
  background:linear-gradient(180deg, rgba(202,138,4,.98), rgba(202,138,4,.88));
  color:#fff;
}
.cta__shine{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
}

.footer__line{background:linear-gradient(90deg, transparent, rgba(12,10,9,.14), transparent)}
.footer__meta{color:rgba(12,10,9,.58)}
.toast{
  border:1px solid rgba(12,10,9,.12);
  background:rgba(255,255,255,.78);
  color:rgba(12,10,9,.86);
  box-shadow:0 18px 60px rgba(12,10,9,.14);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0C0A09;
    --fg:#FAFAF9;
    --muted:rgba(250,250,249,.70);
    --line:rgba(255,255,255,.12);
    --shadow:0 20px 60px rgba(0,0,0,.55);
  }
  body{
    background:
      radial-gradient(1100px 760px at 16% 0%, rgba(202,138,4,.16), transparent 58%),
      radial-gradient(900px 700px at 78% 16%, rgba(255,255,255,.08), transparent 60%),
      var(--bg);
  }
  .top{
    background:linear-gradient(to bottom, rgba(12,10,9,.88), rgba(12,10,9,.55));
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .brand__hint{color:rgba(255,255,255,.58)}
  .hero__badge,.btn,.meta,.preview,.controls,.hero__showcase,.heroCard{
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
  }
  .btn:hover{box-shadow:0 14px 40px rgba(0,0,0,.55)}
  .controls__label,.field__label{color:rgba(255,255,255,.72)}
  .input{
    border-color:rgba(255,255,255,.12);
    background:rgba(0,0,0,.22);
    color:rgba(255,255,255,.92);
  }
  .toggle,.inputBtn{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.82)}
  .footer__line{background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent)}
  .footer__meta{color:rgba(255,255,255,.62)}
  .toast{background:rgba(0,0,0,.42);color:rgba(255,255,255,.86)}
  .fx__grain{mix-blend-mode:overlay;opacity:.32}
  .fx__vignette{background:radial-gradient(closest-side at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%)}
  .bgPicker__panel{
    border-color:rgba(255,255,255,.12);
    background:rgba(12,10,9,.70);
  }
  .bgPicker__head{border-bottom-color:rgba(255,255,255,.10)}
  .bgPicker__title{color:rgba(255,255,255,.88)}
  .bgPicker__close{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
  .bgPicker__close::before,.bgPicker__close::after{background:rgba(255,255,255,.82)}
  .bgOpt{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow:0 18px 66px rgba(0,0,0,.55)}
  .bgOpt:hover{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.06)}
  .bgOpt__k{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.72)}
  .bgOpt__t{color:rgba(255,255,255,.92)}
}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .hero__showcase{min-height:340px}
  .productCard{grid-column:span 12}
}

@media (max-width: 980px){
  .hero__frame{flex-direction:column}
  .hero__art{min-height:440px}
  .lab__stage{flex-direction:column}
  .fields{grid-template-columns:1fr}
  .beat{transform:translateX(0) rotate(0)}
  .story__meter{display:none}
  .brand__hint{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero__scan{animation:none}
  .scrollPill__dot{animation:none}
  .cta__shine{transition:none}
}

body[data-bg="fireworks"]{
  --bg:#07122A;
  --fg:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.14);
  --hot:#FF5CAC;
  --cold:#50DCFF;
  --acid:#A86DFF;
  --gold:#FFC86A;
  --shadow:0 22px 70px rgba(0,0,0,.55);
  background:
    radial-gradient(1100px 860px at 16% 92%, rgba(80,220,255,.32), transparent 62%),
    radial-gradient(1100px 860px at 86% 18%, rgba(255,92,172,.34), transparent 62%),
    radial-gradient(900px 700px at 58% 56%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, rgba(7,18,42,1), rgba(10,40,92,1) 55%, rgba(66,11,56,1));
  color:var(--fg);
}
body[data-bg="fireworks"] .fx__vignette{
  background:radial-gradient(closest-side at 50% 42%, transparent 58%, rgba(0,0,0,.45) 100%);
}
body[data-bg="fireworks"] .fx__grain{
  mix-blend-mode:overlay;
  opacity:.22;
}
body[data-bg="fireworks"] .top{
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(7,18,42,.32), rgba(7,18,42,.14));
  border-bottom:1px solid rgba(255,255,255,.12);
}
body[data-bg="fireworks"] .brand__mark{
  box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 0 30px rgba(80,220,255,.20), 0 0 42px rgba(255,92,172,.14);
}
body[data-bg="fireworks"] .brand__hint{color:rgba(255,255,255,.66)}
body[data-bg="fireworks"] .topCta{
  border-color:rgba(80,220,255,.32);
  background:linear-gradient(180deg, rgba(255,92,172,.16), rgba(80,220,255,.10));
}
body[data-bg="fireworks"] .topCta:hover{border-color:rgba(80,220,255,.55)}
body[data-bg="fireworks"] .topCta__glow{
  background:radial-gradient(circle at 40% 30%, rgba(255,92,172,.34), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(80,220,255,.24), transparent 55%);
}
body[data-bg="fireworks"] .topCta.topCta--secondary{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}

body[data-bg="fireworks"] .preview,
body[data-bg="fireworks"] .controls{
  border-color:rgba(255,255,255,.14);
  background:rgba(7,18,42,.22);
  box-shadow:0 20px 70px rgba(0,0,0,.55);
}
body[data-bg="fireworks"] .controls__label,
body[data-bg="fireworks"] .field__label{color:rgba(255,255,255,.72)}
body[data-bg="fireworks"] .input{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}

body[data-bg="snow"]{
  --bg:#071225;
  --fg:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.14);
  --hot:#B6F2FF;
  --cold:#50DCFF;
  --acid:#A86DFF;
  --gold:#FFC86A;
  --shadow:0 22px 70px rgba(0,0,0,.55);
  background:
    radial-gradient(1100px 860px at 20% 92%, rgba(80,220,255,.24), transparent 62%),
    radial-gradient(1100px 860px at 88% 18%, rgba(168,109,255,.22), transparent 62%),
    radial-gradient(900px 700px at 56% 44%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(135deg, rgba(7,18,37,1), rgba(8,24,54,1) 55%, rgba(22,16,46,1));
  color:var(--fg);
}
body[data-bg="snow"] .fx__vignette{
  background:radial-gradient(closest-side at 50% 44%, transparent 58%, rgba(0,0,0,.48) 100%);
}
body[data-bg="snow"] .fx__grain{
  mix-blend-mode:overlay;
  opacity:.18;
}
body[data-bg="snow"] .top{
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(7,18,37,.30), rgba(7,18,37,.12));
  border-bottom:1px solid rgba(255,255,255,.12);
}
body[data-bg="snow"] .brand__hint{color:rgba(255,255,255,.66)}
body[data-bg="snow"] .topCta{
  border-color:rgba(80,220,255,.28);
  background:linear-gradient(180deg, rgba(80,220,255,.14), rgba(168,109,255,.10));
}
body[data-bg="snow"] .topCta:hover{border-color:rgba(80,220,255,.52)}
body[data-bg="snow"] .topCta__glow{
  background:radial-gradient(circle at 40% 30%, rgba(80,220,255,.28), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(168,109,255,.20), transparent 55%);
}
body[data-bg="snow"] .topCta.topCta--secondary{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
body[data-bg="snow"] .preview,
body[data-bg="snow"] .controls{
  border-color:rgba(255,255,255,.14);
  background:rgba(7,18,37,.22);
  box-shadow:0 20px 70px rgba(0,0,0,.55);
}
body[data-bg="snow"] .controls__label,
body[data-bg="snow"] .field__label{color:rgba(255,255,255,.72)}
body[data-bg="snow"] .input{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}

body[data-bg="snow"] .productCard{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:0 18px 70px rgba(0,0,0,.55);
}
body[data-bg="snow"] .productCard:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  box-shadow:0 22px 86px rgba(0,0,0,.60);
}
body[data-bg="snow"] .productCard__desc{color:rgba(255,255,255,.70)}
body[data-bg="snow"] .productCard__link{color:rgba(255,255,255,.88)}
body[data-bg="snow"] .pill{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
}
body[data-bg="snow"] .pill--on{
  border-color:rgba(80,220,255,.42);
  color:rgba(182,242,255,.92);
}
body[data-bg="snow"] .footer__line{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
body[data-bg="snow"] .footer__meta{color:rgba(255,255,255,.62)}
body[data-bg="snow"] .toast{
  border-color:rgba(255,255,255,.14);
  background:rgba(7,18,37,.42);
  color:rgba(255,255,255,.86);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}
body[data-bg="fireworks"] .input:focus{
  border-color:rgba(80,220,255,.55);
  box-shadow:0 0 0 4px rgba(80,220,255,.18);
}
body[data-bg="fireworks"] .toggle,
body[data-bg="fireworks"] .inputBtn{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
}
body[data-bg="fireworks"] .toggle.is-active{
  border-color:rgba(255,92,172,.55);
  box-shadow:0 0 0 4px rgba(255,92,172,.16);
}
body[data-bg="fireworks"] .cta{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}
body[data-bg="fireworks"] .cta--primary{
  border-color:rgba(80,220,255,.40);
  background:linear-gradient(180deg, rgba(255,92,172,.86), rgba(80,220,255,.56));
  color:#fff;
}

body[data-bg="fireworks"] .productCard{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:0 18px 70px rgba(0,0,0,.55);
}
body[data-bg="fireworks"] .productCard:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  box-shadow:0 22px 86px rgba(0,0,0,.60);
}
body[data-bg="fireworks"] .productCard__desc{color:rgba(255,255,255,.70)}
body[data-bg="fireworks"] .productCard__link{color:rgba(255,255,255,.88)}
body[data-bg="fireworks"] .pill{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
}
body[data-bg="fireworks"] .pill--on{
  border-color:rgba(255,92,172,.45);
  color:rgba(255,200,106,.92);
}
body[data-bg="fireworks"] .footer__line{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
body[data-bg="fireworks"] .footer__meta{color:rgba(255,255,255,.62)}
body[data-bg="fireworks"] .toast{
  border-color:rgba(255,255,255,.14);
  background:rgba(7,18,42,.42);
  color:rgba(255,255,255,.86);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}

body[data-bg="fireworks"] .bgPicker__backdrop{
  background:radial-gradient(900px 600px at 50% 40%, rgba(7,18,42,.35), rgba(0,0,0,.65));
}
body[data-bg="fireworks"] .bgPicker__panel{
  border-color:rgba(255,255,255,.14);
  background:rgba(7,18,42,.72);
}
body[data-bg="fireworks"] .bgPicker__head{border-bottom-color:rgba(255,255,255,.12)}
body[data-bg="fireworks"] .bgPicker__title{color:rgba(255,255,255,.90)}
body[data-bg="fireworks"] .bgPicker__close{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
body[data-bg="fireworks"] .bgPicker__close::before,
body[data-bg="fireworks"] .bgPicker__close::after{background:rgba(255,255,255,.82)}
body[data-bg="fireworks"] .bgOpt{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:0 18px 66px rgba(0,0,0,.55);
}
body[data-bg="fireworks"] .bgOpt:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
}
body[data-bg="fireworks"] .bgOpt__k{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.74);
}
body[data-bg="fireworks"] .bgOpt__t{color:rgba(255,255,255,.92)}
body[data-bg="fireworks"] .bgOnlyPanel{
  border-color:rgba(255,255,255,.14);
  background:rgba(7,18,42,.42);
}
body[data-bg="fireworks"] .bgOnlyInput{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}