docs: 添加随机逻辑解释页面

analysis/FishDice/style.css

@@ -281,6 +281,152 @@ pre {
   font-size: 14px;
 }
 
+.diagram-panel {
+  border: 1px solid var(--line);
+  background:
+    linear-gradient(135deg, rgba(184, 71, 42, 0.08), transparent 36%),
+    linear-gradient(315deg, rgba(31, 111, 104, 0.08), transparent 34%),
+    var(--panel);
+  padding: 20px;
+  margin: 18px 0 28px;
+  overflow-x: auto;
+}
+
+.logic-flow {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(142px, 1fr));
+  gap: 14px;
+  min-width: 820px;
+  align-items: stretch;
+}
+
+.logic-node {
+  position: relative;
+  border: 2px solid var(--line);
+  background: rgba(255, 253, 247, 0.92);
+  padding: 14px;
+  min-height: 112px;
+}
+
+.logic-node::after {
+  content: "→";
+  position: absolute;
+  right: -18px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--accent);
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.logic-node:last-child::after,
+.logic-node.break::after {
+  display: none;
+}
+
+.logic-node strong {
+  display: block;
+  color: var(--accent);
+  margin-bottom: 6px;
+}
+
+.logic-node span {
+  display: block;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.logic-node.alt {
+  border-color: rgba(31, 111, 104, 0.62);
+}
+
+.logic-node.stop {
+  border-color: rgba(157, 44, 47, 0.56);
+}
+
+.framework-map {
+  display: grid;
+  grid-template-columns: 1fr 1.25fr 1fr;
+  gap: 16px;
+  min-width: 900px;
+}
+
+.framework-column {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.framework-title {
+  font-weight: 800;
+  color: var(--accent-2);
+  padding-bottom: 8px;
+  border-bottom: 2px solid var(--line);
+}
+
+.framework-box {
+  border: 1px solid var(--line);
+  background: rgba(255, 253, 247, 0.9);
+  padding: 14px;
+}
+
+.framework-box strong {
+  display: block;
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+
+.framework-box p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.formula {
+  display: inline-block;
+  margin: 6px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  background: var(--soft);
+  font-family: Consolas, "Cascadia Mono", monospace;
+  color: var(--code);
+}
+
+.step-list {
+  counter-reset: step;
+  display: grid;
+  gap: 12px;
+  margin: 18px 0;
+}
+
+.step-item {
+  counter-increment: step;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  padding: 14px 16px 14px 54px;
+  position: relative;
+}
+
+.step-item::before {
+  content: counter(step);
+  position: absolute;
+  left: 14px;
+  top: 14px;
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  background: var(--accent-2);
+  color: white;
+  font-weight: 800;
+}
+
+.step-item strong {
+  color: var(--accent);
+}
+
 @media (max-width: 760px) {
   .shell {
     width: min(100vw - 24px, 1180px);
@@ -294,4 +440,8 @@ pre {
   .flow-row {
     grid-template-columns: 1fr;
   }
+
+  .diagram-panel {
+    padding: 14px;
+  }
 }