header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:10;
}
svg{
  width:25px;
}
.sticker-layout{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  max-width:350px;
  width:100%;
  margin-top:20px;
  margin-left:auto;
  overflow:hidden;
}
.inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  width:100%;
  height:100%;
  padding:10px 15px;
  background-color:#292D39;
  line-height:1;
  border-radius:12px;
  overflow:hidden;
}
.text-wrap p{
  font-size:15px;
  font-weight:500;
  letter-spacing:.35em;
  line-height:1;
  white-space: nowrap;
}
.web-icon svg{
  width:28px;
}
#brain-content {
  position:fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
  touch-action: none;
  z-index:0;
  pointer-events:none;
}

#brain-content.grabbing { 
  cursor: grabbing; 
}

canvas { 
  display: block; 
  width: 100%;
  height: 100%;
  touch-action: none;
}
.marquee-container {
    width: 100%;
    overflow: hidden;
}
.marquee > div {
    display: flex;
}

.marquee p {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    margin-right: 20px;
    letter-spacing: .155em;
}

.marquee .loading-txt {
    opacity: 1;
    transform: translateY(0%);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.marquee .coming-soon--txt {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.marquee.coming-soon-active .loading-txt {
    opacity: 0;
    transform: translateY(-100%);
    position: absolute;
    top: 0;
    left: 0;
}
.marquee.coming-soon-active .coming-soon--txt {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
}

/* Smooth transitions for icon swapping */
.swap-icon {
    position: relative;
}

.icon01, .icon02 {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.icon02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sticker-layout .inner {
    will-change: transform;
    transition: transform 0.3s ease;
}
.sticker-layout[data-state="loading"] .icon01 {
    animation: pulse 2s ease-in-out infinite;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  z-index:10;
}
footer p{
  font-size:.75rem;
  font-weight:var(--font-w-md);
}
footer p a{
  text-decoration:underline;
  padding-bottom:.625rem;
  color:var(--color-link);
}
/*-- media query 64rem --*/
@media screen and (min-width:64rem){
  .text-wrap p{
    font-size:20px;
  }

}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}