body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000}.app-container{display:flex;gap:1.5rem;min-height:100vh}.sidebar{position:fixed;top:0;left:0;width:60px;height:100vh;background-color:#111;color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:30px;animation:slideInLeft .6s ease forwards;box-shadow:2px 0 10px #0000004d}.sidebar-logo{font-size:1.8rem;margin-bottom:60px;opacity:0;animation:fadeIn .6s ease .2s forwards}.sidebar-menu{display:flex;flex-direction:column;gap:30px;align-items:center;opacity:0;animation:fadeIn .6s ease .4s forwards;padding-top:5rem}.sidebar-icon{font-size:1.4rem;color:#ccc;transition:color .3s ease,transform .3s ease;text-decoration:none}.sidebar-icon:hover{color:#fff;transform:scale(1.2)}.sidebar-icon.active{color:#fff}@keyframes slideInLeft{0%{transform:translate(-80px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.video-grid{display:grid;grid-template-areas:"card1 card1 card2" "card3 card4 card5";grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:1.5rem;padding:2rem 1rem 2rem 7rem;flex:1;overflow-y:auto}.video-card{position:relative;overflow:hidden;border-radius:20px;animation:fadeInUp 1s ease-out forwards;opacity:0;transform:translateY(20px);border:1px solid #2c2b2b}.card-1{animation-delay:.2s}.card-2{animation-delay:.4s}.card-3{animation-delay:.6s}.card-4{animation-delay:.8s}.card-5{animation-delay:1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.video-card .overlay{position:absolute;bottom:10%;left:5%;z-index:2;color:#ded8d8dd;line-height:1.4;font-weight:500;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.3)}.video-card .overlay h3{margin:0;font-weight:500}.video-card:hover{transform:scale(1.02);box-shadow:0 20px 40px #0009}.video-card video{width:100%;height:100%;object-fit:cover}.video-card .overlay{position:absolute;top:0;left:0;padding:2rem;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-start;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 60%)}.video-card .overlay h3{color:#ded8d8dd;text-shadow:0 2px 4px rgba(0,0,0,.6);font-size:1.5rem;font-weight:600;letter-spacing:.5px;line-height:1.2;margin:0;animation:fadeInUp .8s ease both}.video-card .overlay h3+h3{margin-top:.5rem;font-weight:400;font-size:1.5rem;opacity:.9}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-1{grid-area:card1;height:400px}.card-2{grid-area:card2;height:400px}.card-3{grid-area:card3;height:300px}.card-4{grid-area:card4;height:300px}.card-5{grid-area:card5;height:300px}.about-page{height:100vh;background-color:#000;color:#ded8d8dd;display:flex;justify-content:center;align-items:center;animation:fadeInUp 1s ease}.about-content{max-width:700px;text-align:center;animation:slideIn 1s ease}.about-content h1{font-size:2.8rem;margin-bottom:20px;font-weight:600;color:#fff}.about-content p{font-size:1.1rem;line-height:1.7;margin-bottom:20px;color:#7a7777}.about-content strong{font-weight:600;color:#fff}.github-btn{display:inline-block;padding:10px 20px;background-color:#000;color:#fff;text-decoration:none;border-radius:8px;transition:background-color .3s;border:1px solid #333}.github-btn:hover{background-color:#333}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:60px;flex-direction:row;justify-content:space-around;padding:0;padding-bottom:env(safe-area-inset-bottom);animation:slideInUp .6s ease forwards;z-index:1000}@keyframes slideInUp{0%{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}.sidebar-logo{display:none}.sidebar-menu{flex-direction:row;gap:0;width:100%;justify-content:space-around;padding:5px 0}.app-container{padding-bottom:80px}.video-grid{grid-template-areas:"card1" "card2" "card3" "card4" "card5";grid-template-columns:repeat(1,1fr);padding:1rem 1rem 5rem;width:100%!}.card-1,.card-2{height:300px}.card-3,.card-4,.card-5{height:250px}.about-page{padding:2rem 1rem;height:auto;min-height:100vh;padding-bottom:80px}.about-content h1{font-size:2rem}}@media (min-width: 769px) and (max-width: 1024px){.video-grid{grid-template-areas:"card1 card1" "card2 card3" "card4 card5";grid-template-columns:repeat(2,1fr);padding-left:6rem}.card-1{height:350px}.card-2,.card-3,.card-4,.card-5{height:280px}}@media (min-width: 1025px){.sidebar{width:80px}.sidebar-icon{font-size:1.6rem}}