:root{
  --motion-enter:420ms;
  --motion-fast:180ms;
  --motion-ease:cubic-bezier(.22,1,.36,1);
}

body:before{
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:210px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(75% 120% at 78% 0%,rgba(216,235,227,.52),transparent 70%);
}

#app.route-arrived{
  animation:route-arrive var(--motion-enter) var(--motion-ease) both;
}

.home-hero{
  transform:translateZ(0);
}

.home-hero .hero-copy>*{
  opacity:0;
  transform:translateY(14px);
  animation:hero-copy-in 560ms var(--motion-ease) forwards;
}
.home-hero .hero-copy>*:nth-child(2){animation-delay:50ms}
.home-hero .hero-copy>*:nth-child(3){animation-delay:90ms}
.home-hero .hero-copy>*:nth-child(4){animation-delay:130ms}
.home-hero .hero-copy>*:nth-child(5){animation-delay:170ms}

.hero-map .map-ring,.hero-map:before,.hero-map:after{
  animation-play-state:paused!important;
}
.home-hero.motion-active .hero-map .map-ring{
  animation:map-breathe 6s ease-in-out infinite;
  animation-play-state:running!important;
}
.home-hero.motion-active .hero-map:before{
  animation:map-orbit 22s linear infinite;
  animation-play-state:running!important;
}
.home-hero.motion-active .hero-map:after{
  animation:map-orbit 16s linear infinite reverse;
  animation-play-state:running!important;
}
.home-hero.motion-active .map-card-item{animation:card-drift-a 5.8s ease-in-out infinite}
.home-hero.motion-active .map-card-skill{animation:card-drift-b 6.6s ease-in-out infinite}
.home-hero.motion-active .map-pin{animation:pin-pulse 3.4s ease-in-out infinite}

.motion-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--motion-enter) var(--motion-ease),transform var(--motion-enter) var(--motion-ease),box-shadow var(--motion-fast) ease;
  transition-delay:calc(var(--reveal-order,0) * 36ms);
}
.motion-reveal.is-visible{opacity:1;transform:translateY(0)}

.market .card{
  will-change:transform;
}
.market .card:active{
  transform:scale(.985);
  transition-duration:90ms;
}
.market .card .art img{
  transition:transform 520ms var(--motion-ease);
}
@media(hover:hover){
  .market .card:hover .art img{transform:none}
  .market .card:hover{box-shadow:0 16px 34px rgba(20,60,67,.12)}
}

.location-pill{
  transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) ease;
}
.location-icon{position:relative;overflow:hidden}
.location-icon:after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--hui-sun);
  transform:translate(7px,-7px);
}

.local-preview-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
  padding:13px 15px;
  border:1px solid rgba(20,60,67,.15);
  border-radius:14px;
  background:#fffdf7;
  color:#587472;
  font-size:13px;
}
.local-preview-banner span{display:grid;gap:2px}
.local-preview-banner strong{color:var(--hui-ink);font-size:14px}
.local-preview-banner a{flex:0 0 auto;padding:9px 14px;border-radius:999px;color:#fff;font-weight:750}

button,.board-tabs a,.trust-link{
  touch-action:manipulation;
}
button:active,.board-tabs a:active,.trust-link:active{
  transform:scale(.975);
}

@keyframes route-arrive{from{opacity:.72;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes hero-copy-in{to{opacity:1;transform:none}}
@keyframes map-breathe{0%,100%{transform:scale(.96);opacity:.72}50%{transform:scale(1.05);opacity:1}}
@keyframes map-orbit{to{transform:rotate(360deg)}}
@keyframes card-drift-a{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(0,-7px,0) rotate(-1.7deg)}}
@keyframes card-drift-b{0%,100%{transform:translate3d(0,0,0) rotate(4deg)}50%{transform:translate3d(0,6px,0) rotate(2.6deg)}}
@keyframes pin-pulse{0%,100%{box-shadow:0 0 0 0 rgba(233,185,77,0)}50%{box-shadow:0 0 0 12px rgba(233,185,77,.12)}}

@media(max-width:760px){
  :root{--motion-enter:320ms}
  body:before{height:150px}
  #app button{min-height:44px}
  .local-preview-banner{align-items:flex-start;flex-direction:column;padding:13px}
  .local-preview-banner a{width:100%;min-height:44px;text-align:center}
  .home-hero .hero-copy>*{transform:translateY(9px)}
  .home-hero.motion-active .map-card-item,.home-hero.motion-active .map-card-skill{animation:none}
  .motion-reveal{transform:translateY(12px);transition-delay:calc(var(--reveal-order,0) * 24ms)}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .home-hero .hero-copy>*,.motion-reveal{opacity:1!important;transform:none!important}
}

/* Geno Trace direction: one connected exchange space. */
.home-hero{--pointer-x:0px;--pointer-y:0px;background:#122d38;border-color:#31525e;border-radius:30px;box-shadow:0 24px 65px #12324120;color:#eef9fa}
.home-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(480px circle at var(--glow-x,70%) var(--glow-y,25%),#81a6e426,transparent 70%),radial-gradient(ellipse at 95% 85%,#62c5bc2b,transparent 65%)}
.hero-grid{min-height:460px;position:relative}
.hero-copy{padding:58px 46px}
.hero-copy h1{font-family:"PingFang SC","Helvetica Neue",sans-serif;font-size:clamp(40px,4.5vw,64px);line-height:1.14;letter-spacing:-.05em;color:#f3fbff;font-weight:650}
.hero-kicker{color:#abc9d0;letter-spacing:.02em;text-transform:none}
.hero-copy>p{color:#bcd0d8;max-width:420px}
.hero-actions .primary{background:#b9f0df;color:#18343c;border:1px solid #b9f0df}
.hero-actions .primary:hover{background:#d2f8ec}
.hero-actions .hero-secondary{color:#e7f4f6;border-color:#78949e;background:#ffffff08}
.how-link{color:#bbd5dc}
.hero-map{background:transparent;overflow:visible;min-height:390px;transform:translate(var(--pointer-x),var(--pointer-y));transition:transform 250ms ease-out}
.hero-map:before{width:340px;height:340px;border-color:#9ecad03d}
.hero-map:after{width:230px;height:230px;border-style:dashed;border-color:#bedde046}
.hero-map .map-card{background:#ffffff10;border-color:#ffffff35;color:#eaf6fa;backdrop-filter:blur(12px);box-shadow:0 12px 35px #041d3526;width:130px}
.hero-map .map-card-item{top:40px;left:15%}
.hero-map .map-card-skill{bottom:65px;right:8%}
.hero-map .map-card span{background:#b9f0df24;color:#b9f0df}
.map-pin{width:95px;height:95px;background:linear-gradient(145deg,#6385b866,#8cdec644);border-color:#c8ecea80;font-size:39px;box-shadow:0 0 65px #8ce1d328;backdrop-filter:blur(10px)}
.geno-node{position:absolute;z-index:3;display:grid;grid-template-columns:38px 1fr;gap:3px 9px;text-align:left;padding:12px 15px;border:1px solid #e4f4ff40;border-radius:18px;background:#203e50d9;color:#ecf7ff;box-shadow:0 12px 30px #03192725;backdrop-filter:blur(12px);transition:transform .2s,background .2s;cursor:pointer}
.geno-node>span{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#b9f0df;color:#214c50;font-size:24px}
.geno-node b{font-size:14px;font-weight:650;align-self:center}
.geno-node small{font-size:11px;color:#bad4df;display:none}
.geno-node:hover,.geno-node:focus-visible,.geno-node.is-open{transform:translateY(-5px);background:#37576beb}
.geno-node:hover small,.geno-node:focus-visible small,.geno-node.is-open small{display:block}
.geno-node:focus-visible{outline:3px solid #b9f0df;outline-offset:4px}
.geno-run{top:120px;right:6%}.geno-photo{bottom:120px;left:2%}.geno-surf{top:265px;right:6%}
.hero-proof{position:relative;background:#ffffff06;border-color:#ffffff20}
.hero-proof>span{color:#bcd4dd;border-color:#ffffff20}.hero-proof>span b{color:#b9f0df}
.market .card{border-radius:20px;border-color:#d4e2e5;box-shadow:0 5px 20px #183f4d08}
@media(max-width:760px){.home-hero{border-radius:24px}.hero-copy{min-height:330px;padding:36px 25px 24px}.hero-copy h1{font-size:43px;line-height:1.16}.hero-map{min-height:330px;margin:0 16px 20px;overflow:hidden}.hero-map:before{width:285px;height:285px}.hero-map .map-card-item{top:12px;left:11%}.hero-map .map-card-skill{bottom:24px;right:4%}.geno-run{top:72px;right:2%}.geno-photo{bottom:95px;left:0}.geno-surf{top:219px;right:2%}.geno-node{padding:10px;gap:3px 7px}.geno-node small{display:block}.map-pin{width:78px;height:78px}.hero-map>p{bottom:0;font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-map{transform:none!important}}

.exchange-choice{border:1px solid #c7dcd7;border-radius:18px;padding:20px;margin:22px 0}.exchange-choice legend{font-weight:700;padding:0 8px}.exchange-choice .row>label{display:flex;align-items:center;gap:8px;padding:12px 18px;background:#edf5f2;border-radius:12px;cursor:pointer}.exchange-choice input[type=checkbox]{width:18px;height:18px;accent-color:#276147}.exchange-choice small{color:#6b827a}.exchange-choice .field{margin-top:20px}

.detail-gallery img,.detail-gallery.single img{object-fit:contain;aspect-ratio:auto;height:260px;max-height:none;background:#edf2f0}.detail-gallery.single img{height:auto;max-height:540px}.photo-item img{object-fit:contain}

/* Show the entire uploaded cover on every marketplace card. */
.card .art img{object-fit:contain;background:#edf2f0}

.inbox-banner{display:flex;align-items:center;gap:16px;border-color:#b3dacf;background:#eaf8f2}.inbox-banner>span{font-size:28px}.inbox-banner div{flex:1}.inbox-banner p{margin:4px 0;font-size:14px}.share-panel button{background:#163f36;color:white}