*{
   margin:0;
   padding:0;
   box-sizing:border-box;
}

body{
   background:#0f0f0f;
   color:#fff;
   font-family:'Roboto',sans-serif;
}

header{
   height:72px;
   display:flex;
   justify-content:space-between;
   align-items:center;
   padding:0 40px;
   border-bottom:1px solid #2b2b2b;
   background:#0f0f0f;
   position:sticky;
   top:0;
   z-index:100;
}

.logo{
   display:flex;
   align-items:center;
   gap:12px;
   font-size:28px;
   font-weight:700;
}

.logo-svg {
   height: 42px;
   width: 42px;
}

select{
   background:#202020;
   color:white;
   border:none;
   border-radius:8px;
   padding:12px 18px;
   font-size:15px;
}

main{
   width:min(1200px,92%);
   margin:auto;
}

.page{
   display:none;
   animation:fade .35s;
   padding:70px 0;
}

.page.active{
   display:block;
}

h1{
   font-size:46px;
   margin-bottom:15px;
}

p{
   color:#aaaaaa;
   line-height:1.6;
}

.device-grid{
   margin-top:50px;
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
   gap:35px;
}

.device-card{
   background:#202020;
   border-radius:18px;
   padding:45px;
   cursor:pointer;
   transition:.25s;
   border:1px solid #2f2f2f;
}

.device-card:hover{
   transform:translateY(-8px);
   border-color:#e50914;
   background:#272727;
}

.device-icon{
   font-size:65px;
   margin-bottom:20px;
   display:flex;
   gap:12px;
   justify-content:center;
}

.device-card:hover .device-icon svg{
   stroke:#e50914;
   transition:stroke .25s;
}

.device-card h2{
   margin-bottom:15px;
}

.tutorial-card{
   background:#202020;
   border-radius:20px;
   max-width:700px;
   margin:auto;
   padding:50px;
}

.airplay{
   width:110px;
   display:block;
   margin:auto;
   margin-bottom:35px;
}

.step{
   display:flex;
   gap:20px;
   margin:28px 0;
   align-items:flex-start;
}

.step span{
   width:42px;
   height:42px;
   border-radius:50%;
   background:#e50914;
   display:flex;
   justify-content:center;
   align-items:center;
   font-weight:bold;
}

button{
   margin-top:30px;
   width:100%;
   height:56px;
   background:#e50914;
   color:white;
   border:none;
   border-radius:10px;
   font-size:17px;
   cursor:pointer;
   transition:.2s;
}

button:hover{
   background:#b80710;
}

#featuredChannel{
   margin-top:40px;
}

.channel-card{
   background:#202020;
   border-radius:18px;
   padding:30px;
   margin-bottom:18px;
}

.channel-card h3{
   margin-bottom:10px;
}

.channel-card p{
   margin-bottom:25px;
}

.channel-card a{
   display:inline-block;
   background:#e50914;
   color:white;
   text-decoration:none;
   padding:14px 24px;
   border-radius:8px;
   transition:.2s;
}

.channel-card a:hover{
   background:#b80710;
}

details{
   margin-top:35px;
}

summary{
   cursor:pointer;
   font-size:18px;
   margin-bottom:25px;
}

footer{
   text-align:center;
   color:#777;
   padding:40px;
   border-top:1px solid #2b2b2b;
}

@keyframes fade{
   from{
       opacity:0;
       transform:translateY(20px);
   }
   to{
       opacity:1;
       transform:translateY(0px);
   }
}

@media(max-width:768px){
   header{
       padding:20px;
   }
   h1{
       font-size:34px;
   }
   .device-card{
       padding:30px;
   }
   .tutorial-card{
       padding:30px;
   }
}

.back-btn {
   background: transparent;
   border: 1px solid #444;
   color: #aaa;
   width: auto;
   padding: 8px 16px;
   height: auto;
   font-size: 14px;
   margin-top: 0;
   margin-bottom: 25px;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   border-radius: 6px;
}

.back-btn:hover {
   background: #222;
   color: #fff;
   border-color: #666;
}