@charset "utf-8";

*{box-sizing:border-box}

body{
  margin:0;
  font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji", Arial, sans-serif;
  background:linear-gradient(450deg,#1d4ba3 20%, #0b1220 100%);
  color:#fff;
}

.app{
  width:50%;
  max-width:1100px;
  margin:10px auto;
}

h1{
  text-align:center;
  font-size:clamp(1px,3vw,28px);
}

.viewer{
  background:#071428;
  padding:15px;
  border-radius:14px;
}

video{
  width:100%;
  height:auto;
  max-height:70vh;
  background:black;
  border-radius:10px;
}

.controls{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:center;
  flex-wrap:wrap;
}

button{
  padding:10px 14px;
  font-size:16px;
  border-radius:8px;
  border:none;
  cursor:pointer;
}

input[type=range]{
  flex:1;
  min-width:120px;
}

.thumbnails{
  display:flex;
  gap:10px;
  margin-top:10px;
  overflow-x:auto;
  padding-bottom:10px;
}

.thumb{
  flex:0 0 auto;
  width:clamp(10px,10vw,80px);
  aspect-ratio:16/9;
  cursor:pointer;
  border-radius:8px;
  overflow:hidden;
  opacity:0.6;
  border:2px solid transparent;
  transition:all 0.3s ease;
}

.thumb:hover{
  transform:scale(1.05);
  opacity:0.9;
}

.thumb.active{
  opacity:1;
  border-color:#06b6d4;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mobile optimisations */
@media (max-width:600px){
  .controls{
    gap:6px;
  }
  button{
    flex:1;
    font-size:14px;
    padding:8px;
  }
}
.home-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#06b6d4;
  color:white;
  text-decoration:none;
  padding:10px 20px;
  border-radius:50px;
  font-size:14px;
  margin-bottom:15px;
  transition:all 0.3s ease;
  font-weight:600;
}

.home-btn:hover{
  background:#0891b2;
  transform:translateX(-3px);
  box-shadow:0 6px 15px rgba(0,0,0,0.3);
}

.icon{
  font-size:16px;
}