update quick style page

Author: corredD

me/docs/img/celshaded.png

@@ -325,8 +325,8 @@
 </li>
 
         <li class="md-nav__item">
-  <a href="#stylized" class="md-nav__link">
-    Stylized
+  <a href="#cel-shaded" class="md-nav__link">
+    Cel-shaded
   </a>
 
 </li>
@@ -336,6 +336,27 @@
     Illustrative
   </a>
 
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#shiny" class="md-nav__link">
+    Shiny
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#shiny-illustrative" class="md-nav__link">
+    Shiny-Illustrative
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#shiny-dof" class="md-nav__link">
+    Shiny-DOF
+  </a>
+  
 </li>
 
     </ul>
@@ -406,8 +427,8 @@
 </li>
 
         <li class="md-nav__item">
-  <a href="#stylized" class="md-nav__link">
-    Stylized
+  <a href="#cel-shaded" class="md-nav__link">
+    Cel-shaded
   </a>
 
 </li>
@@ -417,6 +438,27 @@
     Illustrative
   </a>
 
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#shiny" class="md-nav__link">
+    Shiny
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#shiny-illustrative" class="md-nav__link">
+    Shiny-Illustrative
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#shiny-dof" class="md-nav__link">
+    Shiny-DOF
+  </a>
+  
 </li>
 
     </ul>
@@ -438,17 +480,26 @@
 
                   <h1>Quick Styles</h1>
 
-                <div><p>Added a Quick Styles panel to #ME to quickly apply styles: default, stylized, illustrative.</p>
+                <div><p>The Quick Styles panel in #ME allows users to swiftly apply different styles to their representations. Below are the available styles and their effects:</p>
 <h2 id="default">Default</h2>
-<p>Applies default representation preset. Set outline and occlusion effects to defaults.</p>
-<p><img alt="default" src="../img/default.png"></p>
-<h2 id="stylized">Stylized</h2>
-<p>Applies no representation preset. Enables outline and occlusion effects. Enables ignore-light representation parameter.</p>
-<p><img alt="stylized" src="../img/dofstyle.png"></p>
+<p>Applies the default representation preset. Sets outline and occlusion effects to their default values.</p>
+<p><img alt="default" src="../img/defaultstyle.png"></p>
+<h2 id="cel-shaded">Cel-shaded</h2>
+<p>Applies a cel-shaded or toon shading effect. Removes outline, increases lighting intensity, and enhances occlusion intensity.</p>
+<p><img alt="Cel-shaded" src="../img/celshaded.png"></p>
 <h2 id="illustrative">Illustrative</h2>
-<p>Applies illustrative representation preset. Enables outline and occlusion effects. Enables ignore-light parameter.</p>
-<p>Quickest way to emulate @dsgoodsell`s iconic illustrative style in #molstar.</p>
-<p><img alt="illustrative" src="../img/illustrative.png"></p></div>
+<p>Applies the illustrative representation preset. Enables outline and occlusion effects. Enables ignore-light parameter.</p>
+<p>Quickest way to emulate @dsgoodsell`s coloring style.</p>
+<p><img alt="illustrative" src="../img/illustrative.png"></p>
+<h2 id="shiny">Shiny</h2>
+<p>Adds a glossy finish to the sphere rendering. </p>
+<p><img alt="shiny" src="../img/shiny.png"></p>
+<h2 id="shiny-illustrative">Shiny-Illustrative</h2>
+<p>Combines a glossy finish with the illustrative color option.</p>
+<p><img alt="shiny-illustrative" src="../img/shiny_illustrative.png"></p>
+<h2 id="shiny-dof">Shiny-DOF</h2>
+<p>Adds gloss and enables the Depth of Field (DOF) effect, focusing on the camera's current target center.</p>
+<p><img alt="shiny-dof" src="../img/shiny_dof.png"></p></div>