.trip-demo-section{
  padding:76px 30px 100px;
  color:#fff;
  background:#141716 center/cover no-repeat;
  overflow:hidden;
}

.trip-demo-section.is-bg-loaded{
  background-image:url("trip-demo-background-sharp.webp");
}

.trip-demo-corner{
  position:absolute;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

.trip-demo-corner--left{
  top:-18px;
  left:-22px;
  width:clamp(220px,17.7vw,340px);
}

.trip-demo-corner--right{
  right:-18px;
  bottom:-28px;
  width:clamp(185px,15vw,288px);
}

.trip-demo-dust{
  position:absolute;
  z-index:0;
  max-width:none;
  height:auto;
  opacity:.38;
}

.trip-demo-dust--left{
  top:0;
  left:0;
  width:420px;
}

.trip-demo-dust--right{
  right:0;
  bottom:0;
  width:420px;
  opacity:.25;
  transform:rotate(180deg);
}

.trip-demo-art{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  opacity:.32;
}

.trip-demo-section>.section-heading,
.trip-demo-section>.trip-demo,
.trip-demo-section>.trip-demo-cta{
  position:relative;
  z-index:1;
}

.trip-demo-section .section-heading h2{
  font-size:22px;
  font-weight:400;
  letter-spacing:-.02em;
  border-color:#c2b282;
}

.trip-demo{
  width:min(1120px,100%);
  margin:58px auto 0;
  background:transparent;
  color:#171918;
  box-shadow:0 35px 90px rgba(0,0,0,.35);
}

.trip-demo__tabs{
  height:44px;
  padding:7px 22px 0;
  display:flex;
  gap:5px;
  align-items:flex-end;
  overflow:hidden;
  background:linear-gradient(90deg,#101311,#1b1f1c);
  border:1px solid rgba(115,115,115,.28);
  border-bottom:0;
}

.trip-demo__active-tab{
  position:relative;
  flex:0 0 238px;
  width:238px;
  height:37px;
  display:flex;
  align-items:center;
  padding:0 38px 0 17px;
  background:#f5f6f5;
  border:1px solid rgba(115,115,115,.28);
  border-bottom-color:#f5f6f5;
  border-radius:0;
  transform:translateY(1px);
}

.trip-demo__tab-title{
  color:#737872;
  font-size:9px;
  line-height:1;
  font-weight:500;
  letter-spacing:.15em;
}

.trip-demo__tab-close{
  position:absolute;
  top:50%;
  right:14px;
  width:12px;
  height:12px;
  transform:translateY(-50%);
  opacity:.58;
}

.trip-demo__tab-close:before,
.trip-demo__tab-close:after{
  content:"";
  position:absolute;
  left:1px;
  top:5px;
  width:10px;
  height:1px;
  background:#5f645f;
}

.trip-demo__tab-close:before{transform:rotate(45deg)}
.trip-demo__tab-close:after{transform:rotate(-45deg)}

.trip-demo__inactive-tab{
  flex:1 1 0;
  min-width:0;
  height:29px;
  padding:0 14px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#858b87;
  background:#2a2e2b;
  border:1px solid rgba(255,255,255,.075);
  border-bottom:0;
  font-size:8px;
  line-height:1;
  font-weight:500;
  letter-spacing:.06em;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-decoration-line:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(181,185,182,.72);
  pointer-events:none;
  user-select:none;
}

html[lang="en"] .trip-demo__inactive-tab{
  padding-inline:10px;
  font-size:7px;
  letter-spacing:.015em;
}

.trip-demo__top{
  height:54px;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#d7dcda;
  background:#202321;
  border-bottom:1px solid rgba(255,255,255,.11);
  font-size:8px;
  font-weight:700;
  letter-spacing:.2em;
}

.trip-demo__top b{
  color:#91cabb;
  font-size:9px;
}

.trip-demo__viewport{
  position:relative;
  height:590px;
  overflow:hidden;
  background:#f5f6f5;
  border:1px solid #dfe2e0;
  border-top:0;
}

.demo-screen{
  position:absolute;
  inset:0;
  padding:42px 44px 38px;
  opacity:0;
  visibility:hidden;
  filter:blur(9px);
  transform:translateY(24px) scale(.985);
  transition:opacity .33s ease,filter .38s ease,transform .44s cubic-bezier(.2,.75,.2,1),visibility 0s linear .44s;
}

.demo-screen.is-active{
  opacity:1;
  visibility:visible;
  filter:none;
  transform:none;
  transition-delay:0s;
}

.demo-screen>header{
  margin-bottom:28px;
}

.demo-screen>header small{
  display:block;
  margin-bottom:9px;
  color:#626765;
  font-size:9px;
  font-weight:700;
  letter-spacing:.2em;
}

.demo-screen>header h3{
  margin:0;
  font-size:30px;
  line-height:1.1;
  font-weight:400;
  letter-spacing:.035em;
}

.demo-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.demo-options--city{
  grid-template-columns:1fr;
}

.demo-options--places{
  grid-template-columns:repeat(4,1fr);
}

.demo-option{
  position:relative;
  height:390px;
  padding:0;
  overflow:hidden;
  color:#fff;
  background:#252825;
  border:2px solid transparent;
  border-radius:0;
  box-shadow:none;
  text-align:left;
  pointer-events:none;
  transition:border-color .28s ease,transform .32s cubic-bezier(.2,.75,.2,1),box-shadow .32s ease;
}

.demo-option--wide{
  height:390px;
}

.demo-option img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .35s ease;
}

.demo-option:before{
  content:"";
  position:absolute;
  z-index:1;
  inset:38% 0 0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.76));
}

.demo-option>span{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:18px;
}

.demo-option>span b{
  display:block;
  font-size:20px;
  line-height:1.25;
  letter-spacing:.035em;
}

.demo-options--city .demo-option>span b{
  font-size:34px;
  line-height:1.08;
}

.demo-option.is-selected{
  z-index:2;
  border-color:#4ba88f;
  box-shadow:0 18px 38px rgba(42,113,94,.2);
  transform:translateY(-7px);
}

.demo-option.is-selected img{
  transform:scale(1.035);
  filter:saturate(1.08);
}

.demo-option.is-selected:after{
  content:"已选";
  position:absolute;
  z-index:3;
  top:12px;
  right:12px;
  padding:10px 13px;
  color:#102019;
  background:#8dd2bf;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
}
html[lang="zh-Hant"] .demo-option.is-selected:after{content:"已選"}
html[lang="yue-Hant-HK"] .demo-option.is-selected:after{content:"已揀選"}
html[lang="en"] .demo-option.is-selected:after{content:"Selected"}

.demo-options--places .demo-option{
  height:390px;
}

.demo-cursor{
  --cursor-x:calc(100% - 46px);
  --cursor-y:34px;
  position:absolute;
  z-index:20;
  left:0;
  top:0;
  width:27px;
  height:33px;
  opacity:0;
  transform:translate3d(var(--cursor-x),var(--cursor-y),0);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.34));
  pointer-events:none;
  transition:transform .48s cubic-bezier(.2,.75,.2,1),opacity .18s ease;
}

.demo-cursor.is-visible{opacity:1}
.demo-cursor.is-clicking{transform:translate3d(var(--cursor-x),var(--cursor-y),0) scale(.76)}
.demo-cursor svg{display:block;width:100%;height:100%;fill:#fff;stroke:#111;stroke-width:1.35;stroke-linejoin:round}

.demo-screen--result{
  padding:34px;
  color:#fff;
  background:#171a18;
}

.demo-screen--result>header{
  position:absolute;
  z-index:7;
  left:58px;
  bottom:49px;
  margin:0;
  color:#fff;
  text-shadow:0 3px 24px rgba(0,0,0,.75);
}

.demo-screen--result>header small{color:#aeb4b1}
.demo-screen--result>header h3{font-size:clamp(32px,4vw,54px)}

.demo-result-grid{
  height:100%;
  display:grid;
  grid-template-columns:1.4fr repeat(2,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:7px;
}

.demo-result-image{
  --tile-delay:0s;
  position:relative;
  margin:0;
  overflow:hidden;
  opacity:0;
  filter:blur(8px);
  transform:translateY(35px) scale(.94);
}

.demo-result-image--main{grid-row:1/4}
.demo-result-image:nth-child(2){--tile-delay:.1s}
.demo-result-image:nth-child(3){--tile-delay:.2s}
.demo-result-image:nth-child(4){--tile-delay:.3s}
.demo-result-image:nth-child(5){--tile-delay:.4s}
.demo-result-image:nth-child(6){--tile-delay:.5s;grid-column:2/4}

.demo-screen--result.is-active .demo-result-image{
  animation:demo-tile-arrive .72s cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay:var(--tile-delay);
}

.demo-result-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}

.demo-result-image--main:after{
  content:"";
  position:absolute;
  inset:35% 0 0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
}

@keyframes demo-tile-arrive{
  to{opacity:1;filter:none;transform:none}
}

@media (max-width:900px){
  .trip-demo-corner--left{width:190px;top:-8px;left:-18px}
  .trip-demo-corner--right{width:165px;right:-12px;bottom:-18px}
  .trip-demo__active-tab{flex-basis:190px;width:190px}
  .trip-demo__inactive-tab{flex:1 1 0;min-width:0;padding-inline:8px;font-size:7px}
  .demo-screen{padding-inline:28px}
  .demo-option,.demo-options--places .demo-option{height:370px}
  .demo-option>span{left:13px;right:13px;bottom:14px}
  .demo-option>span b{font-size:16px}
}

@media (max-width:640px){
  .trip-demo-section{padding:64px 14px 74px}
  .trip-demo-corner,.trip-demo-dust{display:none}
  .trip-demo-section .section-heading h2{font-size:20px}
  .trip-demo{margin-top:40px}
  .trip-demo__tabs{height:40px;padding:7px 14px 0}
  .trip-demo__active-tab{flex-basis:180px;width:180px;height:33px;border-radius:0}
  .trip-demo__inactive-tab{display:none}
  .trip-demo__active-tab{padding-left:14px;padding-right:34px}
  .trip-demo__tab-title{font-size:8px}
  .trip-demo__tab-close{right:11px}
  .trip-demo__top{height:48px;padding:0 14px;font-size:6px}
  .trip-demo__top b{font-size:7px}
  .trip-demo__viewport{height:630px}
  .demo-screen{padding:28px 18px 24px}
  .demo-screen>header{margin-bottom:20px}
  .demo-screen>header h3{font-size:24px}
  .demo-options,.demo-options--places{grid-template-columns:repeat(2,1fr);gap:8px}
  .demo-options--city{grid-template-columns:1fr}
  .demo-option,.demo-options--places .demo-option{height:232px}
  .demo-option--wide{height:495px}
  .demo-option>span{left:11px;right:11px;bottom:11px}
  .demo-option>span b{font-size:15px}
  .demo-options--city .demo-option>span b{font-size:25px}
  .demo-option.is-selected:after{top:8px;right:8px;padding:7px 9px;font-size:8px}
  .demo-screen--result{padding:8px}
  .demo-result-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:1.4fr repeat(3,1fr);gap:5px}
  .demo-result-image--main{grid-column:1/3;grid-row:1/2}
  .demo-result-image:nth-child(6){grid-column:1/3}
  .demo-screen--result>header{left:22px;bottom:auto;top:44px}
  .demo-screen--result>header h3{font-size:29px}
  .demo-cursor{width:23px;height:29px}
}

@media (prefers-reduced-motion:reduce){
  .demo-screen{display:none;transition:none}
  .demo-screen--result{display:block;opacity:1;visibility:visible;filter:none;transform:none}
  .demo-screen--result .demo-result-image{opacity:1;filter:none;transform:none;animation:none}
  .demo-cursor{display:none}
}

/* Refined cursor, micro-corners and assembled orbital result */
.trip-demo{border-radius:4px;overflow:hidden}.demo-option{border:1px solid rgba(8,10,9,.62);border-radius:3px}.demo-option img{border-radius:2px}.demo-option.is-selected{border-color:#3d9b82;box-shadow:0 18px 38px rgba(42,113,94,.2),0 0 0 1px rgba(61,155,130,.18)}
.demo-cursor{width:24px;height:30px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.28));will-change:transform}.demo-cursor svg{fill:#111;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-miterlimit:2}.demo-cursor.is-clicking{transform:translate3d(var(--cursor-x),var(--cursor-y),0) scale(.86)}
.demo-result-composition{position:absolute;inset:0;display:grid;place-items:center}.demo-result-core{position:absolute;z-index:3;left:50%;top:50%;width:250px;height:330px;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.6);border-radius:3px;opacity:0;filter:blur(8px);transform:translate(-50%,-50%) scale(.82);box-shadow:0 28px 65px rgba(0,0,0,.48)}.demo-result-core:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.76))}.demo-result-core img{width:100%;height:100%;object-fit:cover;border-radius:2px}.demo-screen--result.is-active .demo-result-core{animation:demo-core-arrive .8s cubic-bezier(.2,.75,.2,1) .2s forwards}.demo-result-orbit{--orbit-radius:-220px;position:absolute;z-index:2;left:50%;top:50%;width:500px;height:500px;border:1px solid rgba(157,211,197,.24);border-radius:50%;transform:translate(-50%,-50%);animation:demo-orbit-spin 28s linear infinite}.demo-result-orbit:before{content:"";position:absolute;inset:54px;border:1px dashed rgba(255,255,255,.11);border-radius:50%}.demo-result-image{--angle:0deg;--counter:0deg;--tile-delay:.35s;position:absolute;left:50%;top:50%;width:118px;height:142px;margin:-71px 0 0 -59px;overflow:hidden;border:1px solid rgba(255,255,255,.58);border-radius:3px;background:#242724;opacity:0;filter:none;transform:rotate(var(--angle)) translateY(var(--orbit-radius)) rotate(var(--counter));box-shadow:0 15px 30px rgba(0,0,0,.34)}.demo-result-image:nth-child(1){--angle:0deg;--counter:0deg;--tile-delay:.35s}.demo-result-image:nth-child(2){--angle:72deg;--counter:-72deg;--tile-delay:.48s}.demo-result-image:nth-child(3){--angle:144deg;--counter:-144deg;--tile-delay:.61s}.demo-result-image:nth-child(4){--angle:216deg;--counter:-216deg;--tile-delay:.74s}.demo-result-image:nth-child(5){--angle:288deg;--counter:-288deg;--tile-delay:.87s;grid-column:auto}.demo-result-image img{width:100%;height:100%;object-fit:cover;border-radius:2px;transform:rotate(var(--counter)) scale(1.42);animation:demo-orbit-counter 28s linear infinite}.demo-screen--result.is-active .demo-result-image{animation:demo-orbit-card-arrive .5s ease var(--tile-delay) forwards}.demo-screen--result>header{z-index:6;left:50%;top:50%;bottom:auto;width:225px;text-align:center;transform:translate(-50%,58px)}.demo-screen--result>header small{margin-bottom:8px}.demo-screen--result>header h3{font-size:27px;line-height:1.12;white-space:normal}.trip-demo-cta{margin-top:54px;border-color:#fff}
@keyframes demo-core-arrive{to{opacity:1;filter:none;transform:translate(-50%,-50%) scale(1)}}@keyframes demo-orbit-card-arrive{to{opacity:1}}@keyframes demo-orbit-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes demo-orbit-counter{to{transform:rotate(calc(var(--counter) - 360deg)) scale(1.42)}}
@media (max-width:640px){.demo-cursor{width:22px;height:28px}.demo-result-orbit{--orbit-radius:-164px;width:380px;height:380px}.demo-result-orbit:before{inset:42px}.demo-result-core{width:174px;height:238px}.demo-result-image{width:78px;height:96px;margin:-48px 0 0 -39px}.demo-screen--result>header{left:50%;top:50%;width:160px;transform:translate(-50%,37px)}.demo-screen--result>header h3{font-size:20px}.trip-demo-cta{margin-top:42px}}
@media (prefers-reduced-motion:reduce){.demo-result-orbit,.demo-result-image img{animation:none}.demo-screen--result .demo-result-core,.demo-screen--result .demo-result-image{opacity:1;filter:none}.demo-screen--result .demo-result-core{transform:translate(-50%,-50%)}.demo-screen--result .demo-result-image{transform:rotate(var(--angle)) translateY(var(--orbit-radius)) rotate(var(--counter))}}
.demo-result-image img{transform:scale(1.42);animation-name:demo-orbit-counter-fixed}@keyframes demo-orbit-counter-fixed{to{transform:rotate(-360deg) scale(1.42)}}

/* Final selection refinements */
.trip-demo,.demo-option,.demo-option img,.demo-result-core,.demo-result-core img,.demo-result-image,.demo-result-image img{border-radius:0}.demo-option{border:0}.demo-option.is-selected{border:0;box-shadow:0 18px 38px rgba(42,113,94,.2),inset 0 0 0 2px #3d9b82}.demo-cursor svg{stroke-width:1.05}
.demo-result-core:before,.demo-result-image:after{content:"✓";position:absolute;z-index:5;top:8px;right:8px;width:24px;height:24px;display:grid;place-items:center;color:#102019;background:#8dd2bf;font-size:12px;font-weight:900}.demo-result-orbit{animation:none}.demo-screen--result.is-active .demo-result-orbit{animation:demo-orbit-spin 28s linear infinite}.demo-result-slot{--angle:0deg;--counter:0deg;--tile-delay:.35s;position:absolute;left:50%;top:50%;width:118px;height:142px;margin:-71px 0 0 -59px;transform:rotate(var(--angle)) translateY(var(--orbit-radius))}.demo-result-slot:nth-child(1){--angle:0deg;--counter:0deg;--tile-delay:.35s}.demo-result-slot:nth-child(2){--angle:72deg;--counter:-72deg;--tile-delay:.48s}.demo-result-slot:nth-child(3){--angle:144deg;--counter:-144deg;--tile-delay:.61s}.demo-result-slot:nth-child(4){--angle:216deg;--counter:-216deg;--tile-delay:.74s}.demo-result-slot:nth-child(5){--angle:288deg;--counter:-288deg;--tile-delay:.87s}.demo-result-slot .demo-result-image{position:relative;left:auto;top:auto;width:100%;height:100%;margin:0;opacity:0;filter:none;transform:rotate(var(--counter));box-shadow:0 15px 30px rgba(0,0,0,.34)}.demo-result-slot .demo-result-image img{transform:none;animation:none}.demo-screen--result.is-active .demo-result-slot .demo-result-image{animation-name:demo-orbit-card-arrive,demo-card-upright;animation-duration:.5s,28s;animation-timing-function:ease,linear;animation-delay:var(--tile-delay),0s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none}.demo-result-slot .demo-result-image:after{transform:rotate(0)}@keyframes demo-card-upright{from{transform:rotate(var(--counter))}to{transform:rotate(calc(var(--counter) - 360deg))}}
@media (max-width:640px){.demo-result-slot{width:78px;height:96px;margin:-48px 0 0 -39px}.demo-result-core:before,.demo-result-image:after{top:6px;right:6px;width:19px;height:19px;font-size:10px}}
@media (prefers-reduced-motion:reduce){.demo-screen--result.is-active .demo-result-orbit,.demo-screen--result.is-active .demo-result-slot .demo-result-image{animation:none}.demo-result-slot .demo-result-image{opacity:1;transform:rotate(var(--counter))}}