.essay-diagrams.story-triggers .trigger-table {
            font-size: 13px;
            width: 100%;
        }
.essay-diagrams.story-triggers .trigger-header {
            display: grid;
            grid-template-columns: 140px 1fr 1fr;
            gap: 12px;
            padding: 10px 12px;
            background: var(--bg-light);
            border-radius: 4px 4px 0 0;
            color: var(--yellow);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
.essay-diagrams.story-triggers .trigger-row {
            display: grid;
            grid-template-columns: 140px 1fr 1fr;
            gap: 12px;
            padding: 12px 12px;
            border-bottom: 1px solid var(--bg-light);
            align-items: start;
        }
.essay-diagrams.story-triggers .trigger-row:last-child {
            border-bottom: none;
        }
.essay-diagrams.story-triggers .trigger-name {
            color: var(--text-bright);
            font-weight: 600;
            font-size: 12px;
        }
.essay-diagrams.story-triggers .trigger-mechanism {
            color: var(--text);
            font-size: 12px;
            line-height: 1.5;
        }
.essay-diagrams.story-triggers .trigger-example {
            color: var(--dim);
            font-size: 12px;
            line-height: 1.5;
        }
.essay-diagrams.story-triggers .layer-stack {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-width: 400px;
            margin: 0 auto;
        }
.essay-diagrams.story-triggers .layer-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 14px;
            border-radius: 4px;
            font-size: 12px;
            letter-spacing: 0.5px;
        }
.essay-diagrams.story-triggers .layer-bar .label {
            color: var(--text-bright);
            min-width: 130px;
            font-size: 12px;
        }
.essay-diagrams.story-triggers .layer-bar .detail {
            color: var(--dim);
            font-size: 12px;
        }
.essay-diagrams.story-triggers .layer-1 { background: rgba(39, 37, 34, 0.15); border-left: 3px solid var(--yellow); }
.essay-diagrams.story-triggers .layer-2 { background: rgba(39, 37, 34, 0.1); border-left: 3px solid var(--green); }
.essay-diagrams.story-triggers .layer-3 { background: rgba(39, 37, 34, 0.1); border-left: 3px solid var(--yellow);  }
.essay-diagrams.story-triggers .layer-4 { background: rgba(39, 37, 34, 0.07); border-left: 3px solid var(--green);  }
.essay-diagrams.story-triggers .comparison {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
.essay-diagrams.story-triggers .comparison-item {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
            padding: 12px 16px;
            border-radius: 4px;
        }
.essay-diagrams.story-triggers .comparison-before {
            background: var(--bg-light);
            border-left: 3px solid var(--dim);
        }
.essay-diagrams.story-triggers .comparison-after {
            background: rgba(39, 37, 34, 0.12);
            border-left: 3px solid var(--yellow);
        }
.essay-diagrams.story-triggers .comparison-label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            min-width: 90px;
            color: var(--dim);
        }
.essay-diagrams.story-triggers .comparison-after .comparison-label {
            color: var(--yellow);
        }
.essay-diagrams.story-triggers .comparison-text {
            font-size: 13px;
            color: var(--text);
        }
.essay-diagrams.story-triggers .comparison-arrow {
            color: var(--yellow);
            font-size: 16px;
        }
.essay-diagrams.story-triggers .intent-comparison {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
.essay-diagrams.story-triggers .intent-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            font-size: 13px;
        }
.essay-diagrams.story-triggers .intent-setup {
            color: var(--text);
        }
.essay-diagrams.story-triggers .intent-plus,
.essay-diagrams.story-triggers .intent-equals {
            color: var(--yellow);
            font-size: 16px;
        }
.essay-diagrams.story-triggers .intent-follow {
            color: var(--text);
        }
.essay-diagrams.story-triggers .intent-result {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 4px 10px;
            border-radius: 3px;
        }
.essay-diagrams.story-triggers .intent-good {
            color: var(--green);
            border: 1px solid var(--green);
        }
.essay-diagrams.story-triggers .intent-bad {
            color: var(--red);
            border: 1px solid var(--red);
        }
@media (max-width: 500px){
.essay-diagrams.story-triggers .trigger-header {
                grid-template-columns: 1fr 1fr;
            }
.essay-diagrams.story-triggers .trigger-row {
                grid-template-columns: 1fr;
                gap: 4px;
                padding: 14px 12px;
            }
.essay-diagrams.story-triggers .trigger-name {
                font-size: 13px;
            }
.essay-diagrams.story-triggers .trigger-mechanism {
                font-size: 12px;
            }
.essay-diagrams.story-triggers .trigger-example {
                font-size: 12px;
            }
.essay-diagrams.story-triggers .trigger-header > *:nth-child(3) {
                display: none;
            }
.essay-diagrams.story-triggers .layer-bar .label {
                min-width: 100px;
                font-size: 12px;
            }
.essay-diagrams.story-triggers .layer-bar .detail {
                font-size: 12px;
            }
.essay-diagrams.story-triggers .comparison-label {
                min-width: 70px;
                font-size: 12px;
            }
.essay-diagrams.story-triggers .comparison-text {
                font-size: 12px;
            }
.essay-diagrams.story-triggers .intent-row {
                font-size: 12px;
                gap: 6px;
            }
.essay-diagrams.story-triggers .intent-setup,
.essay-diagrams.story-triggers .intent-follow {
                font-size: 12px;
            }
.essay-diagrams.story-triggers .intent-result {
                font-size: 12px;
            }
}