various ui improvements, including a new sequence nav component and a new kabbalah detail view

app/styles.css

@@ -792,7 +792,7 @@
     }
     .tarot-detail-top {
       display: grid;
-      grid-template-columns: 150px minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr);
       gap: 16px;
       align-items: start;
     }
@@ -866,6 +866,93 @@
       text-transform: uppercase;
       letter-spacing: 0.04em;
     }
+    .tarot-deck-gallery-card {
+      grid-column: 1 / -1;
+    }
+    .tarot-deck-gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 10px;
+    }
+    .tarot-deck-variant {
+      display: grid;
+      gap: 8px;
+      align-content: start;
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #3f3f46;
+      border-radius: 10px;
+      background: #18181b;
+      color: #e4e4e7;
+      cursor: pointer;
+      text-align: left;
+      transition: background 120ms, border-color 120ms, transform 120ms;
+    }
+    .tarot-deck-variant:hover {
+      background: #27272a;
+      border-color: #52525b;
+      transform: translateY(-1px);
+    }
+    .tarot-deck-variant.is-active {
+      border-color: #a5b4fc;
+      box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.28);
+    }
+    .tarot-deck-variant-image {
+      width: 100%;
+      aspect-ratio: 2 / 3;
+      object-fit: contain;
+      object-position: center;
+      display: block;
+      padding: 4px;
+      box-sizing: border-box;
+      border-radius: 8px;
+      border: 1px solid #3f3f46;
+      background: #09090b;
+    }
+    .tarot-deck-variant-label {
+      display: grid;
+      gap: 2px;
+      font-size: 12px;
+      line-height: 1.3;
+    }
+    .tarot-deck-variant-deck {
+      font-weight: 600;
+      color: #f4f4f5;
+    }
+    .tarot-deck-variant-name {
+      color: #a1a1aa;
+    }
+    .tarot-deck-variant-active {
+      color: #a5b4fc;
+      font-size: 11px;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+    }
+    @media (max-width: 720px) {
+      .tarot-deck-gallery {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .tarot-deck-variant {
+        padding: 6px;
+        gap: 6px;
+      }
+
+      .tarot-deck-variant-label {
+        font-size: 11px;
+      }
+
+      .tarot-deck-variant-active {
+        font-size: 10px;
+      }
+    }
+
+    @media (max-width: 420px) {
+      .tarot-deck-gallery {
+        grid-template-columns: minmax(0, 1fr);
+      }
+    }
     .tarot-keywords {
       display: flex;
       flex-wrap: wrap;
@@ -3190,6 +3277,43 @@
       line-height: 1.45;
       color: #e4e4e7;
     }
+    .detail-sequence-nav {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 12px;
+    }
+    .detail-sequence-btn {
+      min-height: 34px;
+      padding: 7px 12px;
+      border-radius: 999px;
+      border: 1px solid #3f3f46;
+      background: #111118;
+      color: #f4f4f5;
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 1;
+      transition: background 120ms, border-color 120ms, color 120ms;
+    }
+    .detail-sequence-btn:hover {
+      background: #27272a;
+      border-color: #52525b;
+    }
+    .detail-sequence-btn:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    .detail-sequence-btn:disabled:hover {
+      background: #111118;
+      border-color: #3f3f46;
+    }
+    .detail-sequence-position {
+      min-width: 78px;
+      color: #a1a1aa;
+      font-size: 12px;
+      line-height: 1.2;
+    }
     .planet-meta-grid {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -3520,6 +3644,34 @@
     }
     #kabbalah-section[hidden] { display: none; }
 
+    #kabbalah-worlds-section {
+      height: calc(100vh - 61px);
+      background: #18181b;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    #kabbalah-worlds-section[hidden] { display: none; }
+
+    #kabbalah-paths-section {
+      height: calc(100vh - 61px);
+      background: #18181b;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    #kabbalah-paths-section[hidden] { display: none; }
+
+    #kabbalah-cross-section {
+      height: calc(100vh - 61px);
+      background: #18181b;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    #kabbalah-cross-section[hidden] { display: none; }
+
+    .kab-browser-intro {
+      padding: 0 12px 8px;
+    }
+
     #kabbalah-tree-section {
       height: calc(100vh - 61px);
       background: #18181b;
@@ -5692,6 +5844,14 @@
         gap: 10px;
       }
 
+      .detail-sequence-nav {
+        width: 100%;
+      }
+
+      .detail-sequence-position {
+        min-width: 0;
+      }
+
       .alpha-text-controls--heading {
         grid-template-columns: 1fr;
       }