chore: Update table styles and optimize toc line indicator

Author: macx

src/components/Table.astro

@@ -19,7 +19,7 @@ const { mode = 'responsive' } = Astro.props
     container: table / inline-size;
     margin-block: var(--sp);
 
-    table {
+    :global(table) {
       background-color: transparent;
       box-shadow: none;
       margin-block: 0;
@@ -34,84 +34,46 @@ const { mode = 'responsive' } = Astro.props
         /* mask-image: linear-gradient(90deg, #000 60%, transparent); */
       }
 
-      table {
+      :global(table) {
         position: relative;
         inline-size: max-content;
         min-inline-size: 100%;
       }
-
-      /* mask-image: linear-gradient(90deg, blue 60%, red);
-      mask-mode: alpha; */
-
-      /*&::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: 2;
-        mask-image: linear-gradient(90deg, #000 60%, transparent);
-        border: 2px solid red;
-      } */
-
-      /* &::before {
-        content: '';
-        position: fixed;
-        inset: 0;
-        z-index: 2;
-
-        background-image: linear-gradient(
-          90deg,
-          transparent calc(100% - var(--shadow)),
-          transparent calc(100% - var(--shadow)),
-          rgb(0 0 0 / 0.15) 100%
-        );
-        border-inline-end: 1px solid rgb(0 0 0 / 0.3);
-         filter: contrast(175%) brightness(3%);
-        pointer-events: none;
-      } */
     }
 
-    /* @container content and (width < 200px) {
-      table {
-        display: none;
-      }
-    } */
-
-    /* &.responsive {
-      display: none;
-    } */
-
-    /* @container (width < 700px) {
-
-    } */
-
     &.responsive {
-      table {
+      :global(table) {
         table-layout: auto;
+        margin-block: 0;
+      }
+
+      .inner {
+        margin-block-end: 0;
       }
 
       @container article (width < 35em) {
-        table {
+        :global(table) {
           table-layout: fixed;
         }
 
-        thead th {
+        :global(thead th) {
           display: none;
         }
 
-        th,
-        td {
+        :global(th),
+        :global(td) {
           display: block;
           padding-block: var(--sp-xs);
           padding-inline: var(--sp);
           border-block-end: 1px solid var(--clr-table-line);
         }
 
-        tbody {
-          tr + tr {
+        :global(tbody) {
+          :global(tr + tr) {
             border-block-start: 5px solid rgb(0 0 0 / 0.1);
           }
 
-          td {
+          :global(td) {
             display: block;
 
             &::before {