body{margin:0;background:#000;color:#fff;font-family:Arial,sans-serif;overflow-x:hidden}
#app{max-width:760px;margin:auto;padding:30px}
.screen{transition:opacity .25s ease,transform .25s ease;display:none;opacity:0;transform:translateY(15px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.screen.active{display:block;opacity:1;transform:translateY(0)}
.logo{display:block;width:200px;margin:24px auto;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
h2{text-align:center;margin:20px}
.card{
display:block;
width:84%;
max-width:620px;
margin:18px auto;
border-radius:24px;
cursor:pointer;
transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, filter .28s ease;
}
.card:hover{
transform:translateY(-8px) scale(1.05);
box-shadow:
0 18px 45px rgba(255,0,0,.35),
0 0 30px rgba(255,40,40,.30);
filter:brightness(1.12) saturate(1.08);
}
.card:active{
transform:scale(.95);
filter:brightness(1.18);
transition-duration:.12s;
}
button{background:#111;color:#fff;border:1px solid #444;border-radius:10px;padding:12px 20px;cursor:pointer}

.subtitle{
  text-align:center;
  color:#b8b8b8;
  font-size:15px;
  font-weight:300;
  letter-spacing:1.5px;
  margin:-6px 0 26px;
  opacity:.85;
}
@media(max-width:600px){
  .subtitle{font-size:14px;}
}


.back-image{
    display:block;
    width:220px;
    max-width:60%;
    margin:30px auto 10px;
    cursor:pointer;
    transition:transform .25s ease, opacity .25s ease;
}
.back-image:hover{transform:scale(1.03);}
.back-image:active{transform:scale(.97);opacity:.9;}


/* v6.5 navigation fix */
#app{position:relative;}
.screen{
 position:absolute;
 inset:0;
 width:100%;
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 transform:translateY(6px);
 transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
}
.screen.active{
 position:relative;
 opacity:1;
 visibility:visible;
 pointer-events:auto;
 transform:translateY(0);
 transition:opacity .28s ease,transform .28s ease;
}


/* v6.6 mobile render fix */
.card{
  display:block;
  aspect-ratio: 3.6 / 1;
  object-fit:cover;
  contain:layout paint;
  content-visibility:auto;
}
.card img{
  display:block;
}
@media (max-width:768px){
  .card{
    width:84%;
    max-width:620px;
    min-height:0;
  }
}


/*v68*/
.screen{
will-change:opacity,transform;
transition:
 opacity .26s cubic-bezier(.22,.61,.36,1),
 transform .26s cubic-bezier(.22,.61,.36,1);
}
.screen.enter{
opacity:0;
transform:translateY(8px);
}
.screen.leave{
opacity:0;
transform:translateY(-8px);
}