body{font-family:Poppins,sans-serif;margin:0;padding:0;background:linear-gradient(to bottom right,#100016,#25003c,#4b007c,#7e3dbb);color:#fff}header{margin:30px auto 30px 4%;width:fit-content;padding:.8rem 2rem;border-radius:15px;background:#5a189a4d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px #0000004d;position:relative;z-index:999;transition:background .3s ease}nav ul{display:flex;justify-content:center;gap:30px;list-style:none;margin:0;padding:0}nav ul li a{color:#fff;text-decoration:none;font-size:1.3rem;font-weight:700;transition:all .3s ease}nav ul li a:hover{color:#e8d1ee;text-shadow:0px 0px 10px #fab7f0}.tutorial-layout{display:flex;gap:2rem;padding:2rem 5%;flex-wrap:wrap}.sidebar{flex:1 1 200px;max-width:220px;background-color:#ffffff0d;padding:1.5rem;border-radius:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 20px #0003;min-height:70vh}.sidebar h2{font-size:1.2rem;margin-bottom:1rem;color:#fdf}.sidebar ul{list-style:none;padding:0}.sidebar ul li a{display:block;padding:.5rem 0;color:#eee;text-decoration:none;font-weight:500;transition:color .2s}.sidebar ul li a.active,.sidebar ul li a:hover{color:#ffdd57;font-weight:700}.tutorials-content{flex:3 1 600px;display:flex;flex-direction:column;gap:2rem}.tutorial-card{background-color:#ffffff12;padding:1.5rem;border-radius:16px;box-shadow:0 6px 20px #00000040;transition:transform .3s ease,box-shadow .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tutorial-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #0006}.tutorial-card h3{margin-top:0;font-size:1.4rem;color:#fdf}.tutorial-card .tags{font-size:.85rem;font-weight:700;color:#ffcaff;margin:.5rem 0}.tutorial-card .desc{font-size:.95rem;color:#e5e5e5}.btn{display:inline-block;margin-top:1rem;padding:.5rem 1.2rem;border-radius:10px;background-color:#6c2bd9;color:#fff;text-decoration:none;font-weight:600;transition:background-color .3s ease}.btn:hover{background-color:#875af5}