.fi-stylus-twig-editor-shell .fi-fo-rich-editor-content {
    font-size: 0.9375rem;
}

/* Description List (аккордеон)  */
.fi-fo-rich-editor-content dl {
    border: 2px dashed #8b5cf6;
    border-radius: 8px;
    padding: 1rem;
    margin: 2rem 0;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
    background-color: rgba(139, 92, 246, 0.05);
    position: relative;
}

.fi-fo-rich-editor-content dl::before {
    content: "Аккордеон";
    position: absolute;
    top: -22px;
    left: 0;
    background: #ede9fe;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid #c4b5fd;
}

.fi-fo-rich-editor-content dt {
    font-weight: 700;
    color: #1f2937;
    padding: 0.5rem 0.75rem;
    background-color: rgba(243, 244, 246, 0.8);
    border-left: 3px solid #8b5cf6;
    margin-bottom: 0.25rem;
    border-radius: 4px;
}

.fi-fo-rich-editor-content dd {
    padding: 0.75rem;
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
    border-left: 2px solid rgba(139, 92, 246, 0.2);
    background-color: white;
    border-radius: 4px;
}

.fi-fo-rich-editor-content dd + dt {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(209, 213, 219, 0.5);
}

.fi-fo-rich-editor-content dl:hover {
    background-color: rgba(139, 92, 246, 0.1);
}

.dark .fi-fo-rich-editor-content dl {
    background-color: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
}

.dark .fi-fo-rich-editor-content dl::before {
    background: #1f2937;
}

.dark .fi-fo-rich-editor-content dt {
    background-color: rgba(31, 41, 55, 0.8);
    color: #f3f4f6;
}

.dark .fi-fo-rich-editor-content dd {
    background-color: #1f2937;
}

/* Conditional content */
.fi-fo-rich-editor .fi-fo-rich-editor-content div[data-condition] {
    position: relative;
    margin-block: 2rem 1rem;
    padding: 1.25rem 1rem 1rem;
    border: 1px dashed #f59e0b;
    border-inline-start: 3px solid #d97706;
    border-radius: 0.75rem;
    background-color: rgba(245, 158, 11, 0.06);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content div[data-condition]::before {
    content: "IF · " attr(data-condition);
    position: absolute;
    inset-block-start: -0.8rem;
    inset-inline-start: 0.75rem;
    max-width: calc(100% - 1.5rem);
    overflow: hidden;
    padding: 0.2rem 0.55rem;
    border: 1px solid #fbbf24;
    border-radius: 999px;
    background-color: #fffbeb;
    color: #92400e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-condition] {
    padding: 0.1em 0.25em;
    border-block-end: 2px dotted #d97706;
    border-radius: 0.25rem;
    background-color: rgba(245, 158, 11, 0.1);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-condition]::before {
    content: "IF · " attr(data-condition);
    display: inline-block;
    max-width: 16rem;
    margin-inline-end: 0.35em;
    overflow: hidden;
    padding: 0.05em 0.4em;
    border-radius: 999px;
    background-color: #fef3c7;
    color: #92400e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    vertical-align: 0.1em;
    white-space: nowrap;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content div[data-condition] {
    border-color: #b45309;
    background-color: rgba(245, 158, 11, 0.08);
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content div[data-condition]::before {
    border-color: #92400e;
    background-color: #292524;
    color: #fcd34d;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-condition] {
    border-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.12);
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-condition]::before {
    background-color: #451a03;
    color: #fde68a;
}

/* Twig template structures */
.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if] {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 0.15rem;
    background: linear-gradient(to top, rgb(245 158 11 / 0.2) 0.18em, transparent 0.18em);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if]::before {
    position: absolute;
    z-index: 3;
    inset-block-end: calc(100% - 0.05rem);
    inset-inline-start: 0;
    max-width: 1.35rem;
    overflow: hidden;
    padding: 0 0.2rem;
    border-radius: 0.2rem;
    background: #fffbeb;
    color: #92400e;
    content: "IF";
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 0.75rem;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if]:hover::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    span[data-twig-inline-if]::before {
    max-width: min(24rem, calc(100vw - 3rem));
    padding-inline: 0.35rem;
    content: "IF · " attr(data-twig-condition);
    font-size: 0.5625rem;
    line-height: 0.875rem;
    text-overflow: ellipsis;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if][data-twig-inline-branch="else"] {
    background: linear-gradient(to top, rgb(139 92 246 / 0.2) 0.18em, transparent 0.18em);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if][data-twig-inline-branch="else"]::before {
    max-width: 1.75rem;
    background: #f5f3ff;
    color: #6d28d9;
    content: "ELSE";
}

.fi-fo-rich-editor
    .fi-fo-rich-editor-content
    span[data-twig-inline-if][data-twig-inline-branch="else"][data-twig-inline-placeholder] {
    padding-inline-end: 1.75rem;
    margin-inline-start: 0.25rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if][data-twig-inline-branch="else"]:hover::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    span[data-twig-inline-if][data-twig-inline-branch="else"]::before {
    content: "ELSE · " attr(data-twig-condition);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-variable] {
    position: relative;
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0.15rem;
    background: linear-gradient(to top, rgb(8 145 178 / 0.2) 0.2em, transparent 0.2em);
    color: #0e7490;
    box-decoration-break: clone;
    font: inherit;
    -webkit-box-decoration-break: clone;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-variable]::before {
    position: absolute;
    z-index: 3;
    inset-block-end: calc(100% - 0.05rem);
    inset-inline-start: 0;
    display: none;
    max-width: min(24rem, calc(100vw - 3rem));
    overflow: hidden;
    padding: 0 0.35rem;
    border-radius: 0.2rem;
    background: #ecfeff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    color: #155e75;
    content: attr(title);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.5625rem;
    font-weight: 750;
    line-height: 0.875rem;
    pointer-events: none;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    white-space: nowrap;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-variable]:hover::before,
.fi-fo-rich-editor
    .fi-fo-rich-editor-content
    span[data-twig-variable].ProseMirror-selectednode::before {
    display: block;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-variable][data-twig-filter-summary]::after {
    position: absolute;
    z-index: 3;
    inset-block-start: -0.1rem;
    inset-inline-end: -0.15rem;
    width: 0.35rem;
    height: 0.35rem;
    padding: 0;
    border-radius: 999px;
    background: #0891b2;
    box-shadow: 0 0 0 2px #fff;
    content: "";
    pointer-events: none;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if],
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for],
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply] {
    --fi-stylus-twig-mark-color: #64748b;
    --fi-stylus-twig-mark-surface: rgb(248 250 252 / 0.7);
    --fi-stylus-twig-mark-text: #334155;

    position: relative;
    margin-block: 0.375rem;
    padding: 0.125rem 0 0.125rem 0.625rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    box-shadow: inset 2px 0 0 var(--fi-stylus-twig-mark-color);
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if] {
    --fi-stylus-twig-mark-color: #d97706;
    --fi-stylus-twig-mark-surface: rgb(255 251 235 / 0.7);
    --fi-stylus-twig-mark-text: #92400e;

    padding-block-start: 1.125rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for] {
    --fi-stylus-twig-mark-color: #0284c7;
    --fi-stylus-twig-mark-surface: rgb(240 249 255 / 0.7);
    --fi-stylus-twig-mark-text: #075985;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply] {
    --fi-stylus-twig-mark-color: #7c3aed;
    --fi-stylus-twig-mark-surface: rgb(245 243 255 / 0.7);
    --fi-stylus-twig-mark-text: #6d28d9;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if]:hover,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for]:hover,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply]:hover,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if].ProseMirror-selectednode,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for].ProseMirror-selectednode,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply].ProseMirror-selectednode,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-if],
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-for],
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-apply] {
    background: var(--fi-stylus-twig-mark-surface);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if]::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for]::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply]::before {
    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline-start: 0.375rem;
    max-width: 2.7rem;
    overflow: hidden;
    padding: 0 0.25rem;
    border: 1px solid currentColor;
    border-radius: 0.2rem;
    background: var(--fi-stylus-twig-token-background, #fff);
    color: var(--fi-stylus-twig-mark-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 0.875rem;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if]::before {
    content: "IF";
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for]::before {
    content: "FOR";
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply]::before {
    content: "APPLY";
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if]:hover::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for]:hover::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply]:hover::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if].ProseMirror-selectednode::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for].ProseMirror-selectednode::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply].ProseMirror-selectednode::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-if]::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-for]::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-apply]::before {
    max-width: min(32rem, calc(100% - 0.75rem));
    padding-inline: 0.4rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    font-size: 0.625rem;
    line-height: 1rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if]:hover::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if].ProseMirror-selectednode::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-if]::before {
    content: "IF · " attr(data-twig-condition);
}

.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"]
    .fi-fo-rich-editor-content
    section[data-twig-if]::before {
    content: "ELSE";
}

.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"]
    .fi-fo-rich-editor-content
    section[data-twig-if]:hover::before,
.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"]
    .fi-fo-rich-editor-content
    section[data-twig-if].ProseMirror-selectednode::before,
.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"][data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-if]::before {
    content: "ELSE · " attr(data-twig-condition);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for]:hover:not([data-twig-key])::before,
.fi-fo-rich-editor
    .fi-fo-rich-editor-content
    section[data-twig-for].ProseMirror-selectednode:not([data-twig-key])::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-for]:not([data-twig-key])::before {
    content: "FOR · " attr(data-twig-item) " IN " attr(data-twig-iterable) attr(data-twig-transform-summary);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for][data-twig-key]:hover::before,
.fi-fo-rich-editor
    .fi-fo-rich-editor-content
    section[data-twig-for][data-twig-key].ProseMirror-selectednode::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-for][data-twig-key]::before {
    content: "FOR · " attr(data-twig-key) ", " attr(data-twig-item) " IN " attr(data-twig-iterable) attr(data-twig-transform-summary);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply]:hover::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply].ProseMirror-selectednode::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    section[data-twig-apply]::before {
    content: "APPLY · " attr(data-twig-apply-summary);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-row-structure] {
    position: relative;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .tableWrapper:has([data-twig-row-structure]) {
    margin-block-start: -0.5rem;
    padding-block-start: 0.5rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .tableWrapper:has([data-twig-row-structure]) > table {
    overflow: visible;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .fi-stylus-twig-row-structure-chips {
    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline-start: 0.375rem;
    display: flex;
    align-items: flex-start;
    gap: 0.1875rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .fi-stylus-twig-row-structure-chip {
    --fi-stylus-twig-row-mark-text: #334155;

    display: block;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .fi-stylus-twig-row-structure-chip::before {
    display: block;
    max-width: 2.7rem;
    overflow: hidden;
    padding: 0 0.25rem;
    border: 1px solid currentColor;
    border-radius: 0.2rem;
    background: var(--fi-stylus-twig-token-background, #fff);
    color: var(--fi-stylus-twig-row-mark-text);
    content: attr(data-twig-row-structure-label);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 0.875rem;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .fi-stylus-twig-row-structure-chip--loop {
    --fi-stylus-twig-row-mark-text: #075985;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .fi-stylus-twig-row-structure-chip--condition {
    --fi-stylus-twig-row-mark-text: #92400e;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-row-structure]:hover .fi-stylus-twig-row-structure-chip::before,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    .fi-stylus-twig-row-structure-chip::before {
    max-width: min(32rem, calc(100% - 0.75rem));
    padding-inline: 0.4rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    content: attr(data-twig-row-structure-summary);
    font-size: 0.625rem;
    line-height: 1rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-loop-id] {
    box-shadow: inset 0 -1px 0 #a855f7;
    background: transparent;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-loop-id]:not([data-twig-loop-id] + [data-twig-loop-id]) {
    position: relative;
    box-shadow: inset 2px 0 0 #a855f7, inset 0 -1px 0 #a855f7;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-loop-id]:not([data-twig-loop-id] + [data-twig-loop-id])::after {
    position: absolute;
    z-index: 3;
    inset-block-start: 0.15rem;
    inset-inline-end: 0.35rem;
    display: block;
    width: max-content;
    max-width: calc(100% - 0.7rem);
    overflow: hidden;
    padding: 0 0.25rem;
    border: 1px solid currentColor;
    border-radius: 0.2rem;
    background: var(--fi-stylus-twig-token-background, #fff);
    color: #7e22ce;
    content: "CELLS";
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 0.875rem;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-fo-rich-editor
    .fi-fo-rich-editor-content
    [data-twig-loop-id]:not([data-twig-loop-id] + [data-twig-loop-id]):not([data-twig-loop-key]):hover::after,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    [data-twig-loop-id]:not([data-twig-loop-id] + [data-twig-loop-id]):not([data-twig-loop-key])::after {
    max-width: min(28rem, calc(100vw - 3rem));
    padding-inline: 0.4rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    content: "CELLS · " attr(data-twig-loop-item) " IN " attr(data-twig-loop-iterable) attr(data-twig-loop-transform-summary);
    font-size: 0.625rem;
    line-height: 1rem;
}

.fi-fo-rich-editor
    .fi-fo-rich-editor-content
    [data-twig-loop-id]:not([data-twig-loop-id] + [data-twig-loop-id])[data-twig-loop-key]:hover::after,
.fi-stylus-twig-editor-shell[data-twig-structure-visible="true"]
    .fi-fo-rich-editor-content
    [data-twig-loop-id]:not([data-twig-loop-id] + [data-twig-loop-id])[data-twig-loop-key]::after {
    max-width: min(28rem, calc(100vw - 3rem));
    padding-inline: 0.4rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    content: "CELLS · " attr(data-twig-loop-key) ", " attr(data-twig-loop-item) " IN " attr(data-twig-loop-iterable) attr(data-twig-loop-transform-summary);
    font-size: 0.625rem;
    line-height: 1rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-branch],
.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-for-branch] {
    position: relative;
    padding: 0.125rem 0 0.125rem 0.5rem;
    border: 0;
    border-inline-start: 1px dashed #cbd5e1;
    border-radius: 0;
    background: transparent;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-branch] + [data-twig-branch],
.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-for-branch] + [data-twig-for-branch] {
    margin-block-start: 0.25rem;
    border-block-start: 1px dashed #e2e8f0;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-branch]::before,
.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-for-branch]::before {
    position: absolute;
    z-index: 2;
    inset-block-start: 0;
    inset-inline-start: 0.5rem;
    padding: 0 0.15rem;
    border-radius: 0.15rem;
    background: var(--fi-stylus-twig-token-background, #fff);
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 0.75rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-branch="then"]::before {
    content: "THEN";
    display: none;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-branch="else"]::before {
    content: "ELSE";
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-for-branch="body"]::before {
    content: "ITEMS";
    display: none;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-for-branch="else"]::before {
    content: "EMPTY";
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-branch="else"],
.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-for-branch="else"] {
    padding-block-start: 0.5rem;
}

.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="if"]
    .fi-fo-rich-editor-content
    section[data-twig-if]
    > [data-twig-branch="else"],
.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="if"]
    .fi-fo-rich-editor-content
    span[data-twig-inline-if][data-twig-inline-branch="else"],
.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"]
    .fi-fo-rich-editor-content
    section[data-twig-if]
    > [data-twig-branch="then"],
.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"]
    .fi-fo-rich-editor-content
    span[data-twig-inline-if][data-twig-inline-branch="then"] {
    display: none;
}

.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"]
    .fi-fo-rich-editor-content
    section[data-twig-if]
    > [data-twig-branch="else"] {
    padding-block-start: 0.125rem;
}

.fi-stylus-twig-editor-shell[data-twig-condition-branch-mode="else"]
    .fi-fo-rich-editor-content
    section[data-twig-if]
    > [data-twig-branch="else"]::before {
    display: none;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-variable].ProseMirror-selectednode {
    outline: 2px solid #7c3aed;
    outline-offset: 1px;
    outline-color: #0891b2;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if].ProseMirror-selectednode,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for].ProseMirror-selectednode,
.fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply].ProseMirror-selectednode {
    box-shadow: inset 3px 0 0 var(--fi-stylus-twig-mark-color);
    outline: 1px solid var(--fi-stylus-twig-mark-color);
    outline-offset: 1px;
}

.fi-stylus-twig-editor-shell[data-twig-floating-toolbar="table"]
    .fi-fo-rich-editor-content
    > .fi-fo-rich-editor-floating-toolbar:not([x-ref="floatingToolbar::table"]),
.fi-stylus-twig-editor-shell[data-twig-floating-toolbar="twigApply"]
    .fi-fo-rich-editor-content
    > .fi-fo-rich-editor-floating-toolbar:not([x-ref="floatingToolbar::twigApply"]) {
    display: none;
}

.fi-stylus-twig-editor-shell [data-stylus-twig-panel-trigger="row-condition"] {
    position: relative;
}

.fi-stylus-twig-editor-shell
    [data-stylus-twig-panel-trigger="row-condition"][data-twig-row-condition-rule-count]::after {
    position: absolute;
    inset-block-start: -0.2rem;
    inset-inline-end: -0.2rem;
    display: grid;
    min-width: 0.875rem;
    height: 0.875rem;
    place-items: center;
    padding-inline: 0.15rem;
    border: 1px solid var(--fi-stylus-twig-token-background, #fff);
    border-radius: 9999px;
    background: #0f172a;
    color: #fff;
    content: attr(data-twig-row-condition-rule-count);
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.fi-fo-rich-editor .fi-stylus-twig-condition-rule-option {
    display: grid;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 2.125rem;
    grid-template-columns: 1.125rem minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    column-gap: 0.55rem;
    row-gap: 0.1rem;
    padding: 0.375rem 0.625rem;
    text-align: start;
    white-space: normal;
}

.fi-fo-rich-editor
    .fi-stylus-twig-condition-rule-option[data-stylus-twig-condition-description]:not(
        [data-stylus-twig-condition-description=""]
    ) {
    min-height: 2.75rem;
    padding-block: 0.5rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-menu:has(> .fi-stylus-twig-condition-rule-option) {
    width: min(21rem, calc(100vw - 2rem));
    max-height: min(28rem, calc(100vh - 8rem));
    flex-direction: column;
    gap: 0.125rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fi-fo-rich-editor .fi-stylus-twig-condition-rule-option > svg {
    grid-row: 1 / span 2;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.05rem;
}

.fi-fo-rich-editor .fi-stylus-twig-condition-rule-option > svg:not(.fi-color) {
    color: #64748b;
}

.fi-fo-rich-editor .fi-stylus-twig-condition-rule-option > span {
    min-width: 0;
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1rem;
}

.fi-fo-rich-editor .fi-stylus-twig-condition-rule-option::after {
    grid-column: 2;
    min-width: 0;
    color: #64748b;
    content: attr(data-stylus-twig-condition-description);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.925rem;
    overflow-wrap: anywhere;
}

.fi-fo-rich-editor
    .fi-stylus-twig-condition-rule-option:not([data-stylus-twig-condition-description])::after,
.fi-fo-rich-editor
    .fi-stylus-twig-condition-rule-option[data-stylus-twig-condition-description=""]::after {
    display: none;
}

.dark .fi-fo-rich-editor .fi-stylus-twig-condition-rule-option > span {
    color: #f8fafc;
}

.dark .fi-fo-rich-editor .fi-stylus-twig-condition-rule-option::after {
    color: #94a3b8;
}

.dark .fi-fo-rich-editor .fi-stylus-twig-condition-rule-option > svg:not(.fi-color) {
    color: #94a3b8;
}

.fi-fo-builder-item.fi-stylus-twig-filter-parameterless > .fi-fo-builder-item-content,
.fi-fo-builder-item.fi-stylus-twig-filter-parameterless .fi-fo-builder-item-header-collapsible-actions {
    display: none;
}

.fi-fo-builder.fi-collapsible
    .fi-fo-builder-item.fi-stylus-twig-filter-parameterless
    > .fi-fo-builder-item-header {
    cursor: default;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-variable] {
    background: linear-gradient(to top, rgb(34 211 238 / 0.24) 0.2em, transparent 0.2em);
    color: #67e8f9;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-variable]::before {
    background: #164e63;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
    color: #e0f2fe;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if] {
    background: linear-gradient(to top, rgb(245 158 11 / 0.28) 0.18em, transparent 0.18em);
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if]::before {
    background: #451a03;
    color: #fde68a;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if][data-twig-inline-branch="else"] {
    background: linear-gradient(to top, rgb(167 139 250 / 0.3) 0.18em, transparent 0.18em);
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-inline-if][data-twig-inline-branch="else"]::before {
    background: #2e1065;
    color: #ddd6fe;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content span[data-twig-variable][data-twig-filter-summary]::after {
    background: #22d3ee;
    box-shadow: 0 0 0 2px #0f172a;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-if] {
    --fi-stylus-twig-mark-color: #f59e0b;
    --fi-stylus-twig-mark-surface: rgb(69 26 3 / 0.22);
    --fi-stylus-twig-mark-text: #fde68a;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-for] {
    --fi-stylus-twig-mark-color: #38bdf8;
    --fi-stylus-twig-mark-surface: rgb(12 74 110 / 0.22);
    --fi-stylus-twig-mark-text: #bae6fd;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content section[data-twig-apply] {
    --fi-stylus-twig-mark-color: #a78bfa;
    --fi-stylus-twig-mark-surface: rgb(76 29 149 / 0.22);
    --fi-stylus-twig-mark-text: #ddd6fe;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content .fi-stylus-twig-row-structure-chip--condition {
    --fi-stylus-twig-row-mark-text: #fde68a;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content .fi-stylus-twig-row-structure-chip--loop {
    --fi-stylus-twig-row-mark-text: #bae6fd;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-branch],
.dark .fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-for-branch] {
    border-color: #475569;
}

.dark .fi-fo-rich-editor .fi-fo-rich-editor-content [data-twig-loop-id] {
    box-shadow: inset 0 -1px 0 #a78bfa;
}

.dark
    .fi-fo-rich-editor
    .fi-fo-rich-editor-content
    [data-twig-loop-id]:not([data-twig-loop-id] + [data-twig-loop-id]) {
    box-shadow: inset 2px 0 0 #a78bfa, inset 0 -1px 0 #a78bfa;
}

/* Twig editor panels */
.fi-stylus-twig-editor-shell {
    --fi-stylus-twig-token-background: #fff;

    min-width: 0;
}

.dark .fi-stylus-twig-editor-shell {
    --fi-stylus-twig-token-background: #0f172a;
}

.dark
    .fi-stylus-twig-editor-shell
    [data-stylus-twig-panel-trigger="row-condition"][data-twig-row-condition-rule-count]::after {
    background: #e2e8f0;
    color: #0f172a;
}

.fi-stylus-twig-editor-main {
    min-width: 0;
}

.fi-stylus-twig-inline-panels {
    position: relative;
    display: flex;
    height: var(--fi-stylus-twig-panel-max-height);
    min-width: 0;
    max-height: var(--fi-stylus-twig-panel-max-height);
    flex-direction: column;
    align-self: flex-start;
    overflow: hidden;
}

.fi-stylus-twig-panel-resizer {
    position: absolute;
    z-index: 10;
    inset-block: 0;
    inset-inline-start: 0;
    display: none;
    width: 0.625rem;
    cursor: col-resize;
    touch-action: none;
}

.fi-stylus-twig-panel-resizer::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.125rem;
    width: 0.1875rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: #cbd5e1;
    content: '';
    transform: translateY(-50%);
    transition: height 120ms ease, background-color 120ms ease;
}

.fi-stylus-twig-panel-resizer:hover::before,
.fi-stylus-twig-panel-resizer:focus-visible::before,
.fi-stylus-twig-inline-panels-resizing .fi-stylus-twig-panel-resizer::before {
    height: 4rem;
    background: #0ea5e9;
}

.fi-stylus-twig-panel-resizer:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: -2px;
}

.fi-stylus-twig-snippet-list {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem;
    gap: 0.45rem;
}

.fi-stylus-twig-snippet-button {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    padding: 0.7rem;
    border: 1px solid #e2e8f0;
    border-inline-start: 3px solid #38bdf8;
    border-radius: 0.55rem;
    background: #f8fafc;
    text-align: start;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.fi-stylus-twig-snippet-button:not(:disabled):hover {
    border-color: #7dd3fc;
    border-inline-start-color: #0284c7;
    background: #f0f9ff;
    transform: translateX(-2px);
}

.fi-stylus-twig-snippet-button:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.fi-stylus-twig-snippet-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.45rem;
    background: #e0f2fe;
    color: #0369a1;
}

.fi-stylus-twig-snippet-icon svg {
    width: 1rem;
    height: 1rem;
}

.fi-stylus-twig-metadata-icon.fi-color {
    color: var(--color-600);
}

.fi-stylus-twig-snippet-copy {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.fi-stylus-twig-snippet-label {
    overflow: hidden;
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-stylus-twig-snippet-copy code {
    overflow: hidden;
    color: #0369a1;
    font-size: 0.6875rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-stylus-twig-snippet-description {
    color: #64748b;
    font-size: 0.6875rem;
    line-height: 1rem;
}

.fi-stylus-twig-snippet-status {
    margin-top: 0.15rem;
    color: #047857;
    font-size: 0.6875rem;
    line-height: 1rem;
}

.fi-stylus-twig-snippet-unavailable {
    border-inline-start-color: #fca5a5;
}

.fi-stylus-twig-snippet-unavailable .fi-stylus-twig-snippet-status {
    color: #b91c1c;
}

.fi-stylus-twig-outline-list {
    grid-template-columns: minmax(0, 1fr);
}

.fi-stylus-twig-outline-item {
    width: calc(100% - var(--twig-outline-depth) * 0.75rem);
    margin-inline-start: calc(var(--twig-outline-depth) * 0.75rem);
}

.fi-stylus-twig-variable-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.fi-stylus-twig-variable-panel-heading {
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.25rem;
}

.fi-stylus-twig-variable-panel-description {
    margin-top: 0.125rem;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1rem;
}

.fi-stylus-twig-filter-panel-title {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.fi-stylus-twig-condition-panel-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
}

.fi-stylus-twig-filter-panel-title code {
    overflow: hidden;
    color: #0284c7;
    font-size: 0.6875rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-stylus-twig-filter-panel-body {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem;
    gap: 1rem;
}

.fi-stylus-twig-filter-section {
    display: grid;
    gap: 0.5rem;
}

.fi-stylus-twig-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.fi-stylus-twig-panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1rem;
}

.fi-stylus-twig-panel-action:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #0f172a;
}

.fi-stylus-twig-panel-action:disabled {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.fi-stylus-twig-panel-action-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    padding: 0;
}

.fi-stylus-twig-panel-action-keyword {
    min-width: 2.5rem;
    flex: none;
    padding-inline: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.04em;
}

.fi-stylus-twig-panel-action-active {
    border-color: #7dd3fc;
    background: #f0f9ff;
    color: #0369a1;
}

.fi-stylus-twig-panel-action-active:hover {
    border-color: #38bdf8;
    background: #e0f2fe;
    color: #075985;
}

.fi-stylus-twig-panel-action-danger {
    border-color: #fecaca;
    color: #b91c1c;
}

.fi-stylus-twig-panel-action-danger:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.fi-stylus-twig-panel-action svg {
    width: 0.875rem;
    height: 0.875rem;
}

.fi-stylus-twig-loop-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.65rem;
}

.fi-stylus-twig-condition-detail {
    display: grid;
    gap: 0.85rem;
}

.fi-stylus-twig-condition-detail-description {
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.fi-stylus-twig-condition-operands {
    display: grid;
    gap: 0.65rem;
}

.fi-stylus-twig-condition-operand {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #f8fafc;
}

.fi-stylus-twig-condition-operand-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1rem;
    text-transform: uppercase;
}

.fi-stylus-twig-condition-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.35rem;
    border-radius: 0.35rem;
    color: #0284c7;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: normal;
    text-transform: none;
}

.fi-stylus-twig-condition-filter-link:hover {
    background: #e0f2fe;
    color: #0369a1;
}

.fi-stylus-twig-condition-filter-link-active {
    background: #e0f2fe;
    color: #0369a1;
}

.fi-stylus-twig-condition-filter-link svg {
    width: 0.8rem;
    height: 0.8rem;
}

.fi-stylus-twig-condition-filter-count {
    min-width: 1.15rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: #e0f2fe;
    text-align: center;
}

.fi-stylus-twig-condition-field {
    display: grid;
    gap: 0.3rem;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
}

.fi-stylus-twig-condition-field select,
.fi-stylus-twig-condition-field input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    background: #fff;
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.fi-stylus-twig-condition-filter-sections {
    display: grid;
    gap: 1rem;
}

.fi-stylus-twig-loop-field {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
}

.fi-stylus-twig-loop-field input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    background: #fff;
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.fi-stylus-twig-loop-field input:invalid {
    border-color: #fca5a5;
}

.fi-stylus-twig-filter-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 0.25rem;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1rem;
    text-transform: uppercase;
}

.fi-stylus-twig-filter-section-heading span {
    min-width: 1.4rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    letter-spacing: normal;
    text-align: center;
}

.fi-stylus-twig-filter-list,
.fi-stylus-twig-filter-catalog {
    display: grid;
    gap: 0.4rem;
}

.fi-stylus-twig-filter-item,
.fi-stylus-twig-filter-option {
    display: grid;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
    text-align: start;
    transition: border-color 120ms ease, background-color 120ms ease, opacity 120ms ease;
}

.fi-stylus-twig-filter-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    cursor: grab;
}

.fi-stylus-twig-filter-item:active {
    cursor: grabbing;
}

.fi-stylus-twig-filter-item-dragging {
    border-color: #38bdf8;
    opacity: 0.55;
}

.fi-stylus-twig-filter-action {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    place-items: center;
    border-radius: 0.375rem;
    color: #94a3b8;
}

.fi-stylus-twig-filter-action:hover {
    background: #e2e8f0;
    color: #334155;
}

.fi-stylus-twig-filter-action:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.fi-stylus-twig-filter-remove:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.fi-stylus-twig-filter-action svg,
.fi-stylus-twig-filter-icon svg,
.fi-stylus-twig-filter-icon img,
.fi-stylus-twig-filter-option > svg {
    width: 1rem;
    height: 1rem;
}

.fi-stylus-twig-filter-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.4rem;
    background: #e0f2fe;
    color: #0369a1;
}

.fi-stylus-twig-filter-icon[data-stylus-twig-color="gray"] {
    background: #f1f5f9;
    color: #475569;
}

.fi-stylus-twig-filter-icon[data-stylus-twig-color="primary"] {
    background: #e0e7ff;
}

.fi-stylus-twig-filter-icon[data-stylus-twig-color="success"] {
    background: #dcfce7;
}

.fi-stylus-twig-filter-icon[data-stylus-twig-color="warning"] {
    background: #fef3c7;
}

.fi-stylus-twig-filter-copy {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.fi-stylus-twig-filter-copy > span {
    overflow: hidden;
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-stylus-twig-filter-copy code,
.fi-stylus-twig-filter-copy small {
    overflow: hidden;
    color: #64748b;
    font-size: 0.6875rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-stylus-twig-filter-copy code {
    color: #0284c7;
}

.fi-stylus-twig-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.fi-stylus-twig-condition-rule-negate {
    position: relative;
    display: inline-flex;
    flex: none;
    cursor: pointer;
}

.fi-stylus-twig-condition-rule-negate input {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
}

.fi-stylus-twig-condition-rule-negate span {
    min-width: 1.75rem;
    padding: 0.2rem 0.35rem;
    border-radius: 0.375rem;
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 120ms ease, color 120ms ease;
}

.fi-stylus-twig-condition-rule-negate:hover span {
    background: #e2e8f0;
    color: #334155;
}

.fi-stylus-twig-condition-rule-negate input:checked + span {
    background: #fef3c7;
    color: #b45309;
}

.fi-stylus-twig-condition-rule-negate input:focus-visible + span {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.fi-stylus-twig-filter-action {
    cursor: pointer;
}

.fi-stylus-twig-filter-option {
    grid-template-columns: auto minmax(0, 1fr) auto;
    cursor: pointer;
}

.fi-stylus-twig-filter-option:hover {
    border-color: #7dd3fc;
    background: #f0f9ff;
}

.fi-stylus-twig-filter-option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fi-stylus-twig-filter-option > svg {
    color: #0284c7;
}

.fi-stylus-twig-filter-empty {
    padding: 0.8rem 0.5rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.125rem;
    text-align: center;
}

.fi-stylus-twig-variable-panel-close {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    place-items: center;
    border-radius: 0.375rem;
    color: #64748b;
}

.fi-stylus-twig-variable-panel-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.fi-stylus-twig-variable-panel-close:focus-visible,
.fi-stylus-twig-condition-filter-link:focus-visible,
.fi-stylus-twig-condition-field select:focus-visible,
.fi-stylus-twig-condition-field input:focus-visible,
.fi-stylus-twig-loop-field input:focus-visible,
.fi-stylus-twig-filter-item:focus-visible,
.fi-stylus-twig-filter-action:focus-visible,
.fi-stylus-twig-filter-option:focus-visible,
.fi-stylus-twig-panel-action:focus-visible,
.fi-stylus-twig-variable-button:focus-visible,
.fi-stylus-twig-variable-group-button:focus-visible,
.fi-stylus-twig-variable-group-clear:focus-visible,
.fi-stylus-twig-variable-favorite:focus-visible,
.fi-stylus-twig-variable-samples:focus-visible,
.fi-stylus-twig-snippet-button:focus-visible,
.fi-stylus-twig-variable-search input:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.fi-stylus-twig-variable-panel-close svg {
    width: 1rem;
    height: 1rem;
}

.fi-stylus-twig-variable-samples {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0.75rem 0;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
}

.fi-stylus-twig-variable-samples:hover,
.fi-stylus-twig-variable-samples-active {
    background: #f0f9ff;
    color: #0369a1;
}

.fi-stylus-twig-variable-samples svg {
    width: 1rem;
    height: 1rem;
}

.fi-stylus-twig-variable-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0.75rem 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #64748b;
}

.fi-stylus-twig-variable-search svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.fi-stylus-twig-variable-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.fi-stylus-twig-variable-search input::placeholder {
    color: #94a3b8;
}

.fi-stylus-twig-variable-groups {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem;
    gap: 1rem;
}

.fi-stylus-twig-variable-group {
    display: grid;
    gap: 0.4rem;
}

.fi-stylus-twig-variable-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 0.25rem;
}

.fi-stylus-twig-variable-group-heading {
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1rem;
    text-transform: uppercase;
}

.fi-stylus-twig-variable-group-clear {
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
}

.fi-stylus-twig-variable-group-clear:hover {
    color: #0284c7;
}

.fi-stylus-twig-variable-list {
    display: grid;
    gap: 0.35rem;
}

.fi-stylus-twig-variable-row {
    position: relative;
    margin-inline-start: calc(var(--twig-variable-depth, 0) * 0.75rem);
}

.fi-stylus-twig-variable-row-nested::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -0.45rem;
    width: 0.35rem;
    height: 50%;
    border-block-end: 1px solid #cbd5e1;
    border-inline-start: 1px solid #cbd5e1;
    content: "";
}

.fi-stylus-twig-variable-actions {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.fi-stylus-twig-variable-actions:hover {
    border-color: #7dd3fc;
    background: #f0f9ff;
    transform: translateX(-2px);
}

.fi-stylus-twig-variable-group-button {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.5rem;
    padding: 0.625rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #fff;
    text-align: start;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.fi-stylus-twig-variable-group-button:hover {
    border-color: #7dd3fc;
    background: #f8fafc;
}

.fi-stylus-twig-variable-group-chevron {
    position: absolute;
    z-index: 1;
    inset-block-start: 0.75rem;
    inset-inline-start: -0.625rem;
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: 0.3rem;
    background: #e0f2fe;
    color: #0369a1;
    transition: transform 120ms ease;
}

.fi-stylus-twig-variable-group-chevron-open {
    transform: rotate(90deg);
}

.fi-stylus-twig-variable-group-chevron svg {
    width: 0.875rem;
    height: 0.875rem;
}

.fi-stylus-twig-variable-group-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.fi-stylus-twig-variable-group-count {
    min-width: 1.4rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.fi-stylus-twig-variable-button {
    display: grid;
    width: 100%;
    gap: 0.2rem;
    padding: 0.625rem 2.7rem 0.625rem 0.7rem;
    text-align: start;
}

.fi-stylus-twig-variable-favorite {
    position: absolute;
    z-index: 1;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.4rem;
    color: #94a3b8;
}

.fi-stylus-twig-variable-favorite:hover {
    background: #fefce8;
    color: #ca8a04;
}

.fi-stylus-twig-variable-favorite svg {
    width: 1rem;
    height: 1rem;
}

.fi-stylus-twig-variable-favorite-active {
    color: #ca8a04;
}

.fi-stylus-twig-variable-empty {
    padding: 1rem 0.5rem;
    color: #64748b;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    text-align: center;
}

.fi-stylus-twig-variable-label {
    overflow: hidden;
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-stylus-twig-variable-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
}

.fi-stylus-twig-variable-icon {
    display: grid;
    flex: none;
    place-items: center;
}

.fi-stylus-twig-variable-icon svg,
.fi-stylus-twig-variable-icon img {
    width: 1rem;
    height: 1rem;
}

.fi-stylus-twig-variable-description {
    color: #64748b;
    font-size: 0.6875rem;
    line-height: 1rem;
}

.fi-stylus-twig-variable-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.6875rem;
    line-height: 1rem;
}

.fi-stylus-twig-variable-meta code {
    overflow: hidden;
    color: #0369a1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-stylus-twig-variable-meta > span {
    flex: none;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #e2e8f0;
}

.dark .fi-stylus-twig-snippet-button {
    border-color: #334155;
    border-inline-start-color: #0ea5e9;
    background: #1e293b;
}

.dark .fi-stylus-twig-snippet-button:not(:disabled):hover {
    border-color: #0369a1;
    border-inline-start-color: #38bdf8;
    background: rgb(12 74 110 / 0.35);
}

.dark .fi-stylus-twig-snippet-icon {
    background: rgb(12 74 110 / 0.55);
    color: #7dd3fc;
}

.dark .fi-stylus-twig-metadata-icon.fi-color {
    color: var(--color-400);
}

.dark .fi-stylus-twig-snippet-label {
    color: #f8fafc;
}

.dark .fi-stylus-twig-snippet-copy code {
    color: #7dd3fc;
}

.dark .fi-stylus-twig-snippet-description {
    color: #94a3b8;
}

.dark .fi-stylus-twig-snippet-status {
    color: #6ee7b7;
}

.dark .fi-stylus-twig-snippet-unavailable {
    border-inline-start-color: #7f1d1d;
}

.dark .fi-stylus-twig-snippet-unavailable .fi-stylus-twig-snippet-status {
    color: #fca5a5;
}

.dark .fi-stylus-twig-variable-panel-header {
    border-color: #334155;
}

.dark .fi-stylus-twig-filter-panel-title code,
.dark .fi-stylus-twig-filter-copy code {
    color: #7dd3fc;
}

.dark .fi-stylus-twig-loop-field {
    color: #cbd5e1;
}

.dark .fi-stylus-twig-loop-field input {
    border-color: #475569;
    background: #1e293b;
    color: #f8fafc;
}

.dark .fi-stylus-twig-loop-field input:invalid {
    border-color: #b91c1c;
}

.dark .fi-stylus-twig-filter-section-heading,
.dark .fi-stylus-twig-filter-copy small,
.dark .fi-stylus-twig-filter-empty,
.dark .fi-stylus-twig-condition-detail-description {
    color: #94a3b8;
}

.dark .fi-stylus-twig-condition-operand {
    border-color: #334155;
    background: #1e293b;
}

.dark .fi-stylus-twig-condition-operand-heading,
.dark .fi-stylus-twig-condition-field {
    color: #cbd5e1;
}

.dark .fi-stylus-twig-condition-filter-link {
    color: #7dd3fc;
}

.dark .fi-stylus-twig-condition-filter-link:hover,
.dark .fi-stylus-twig-condition-filter-link-active,
.dark .fi-stylus-twig-condition-filter-count {
    background: rgb(12 74 110 / 0.45);
    color: #bae6fd;
}

.dark .fi-stylus-twig-condition-field select,
.dark .fi-stylus-twig-condition-field input {
    border-color: #475569;
    background: #0f172a;
    color: #f8fafc;
}

.dark .fi-stylus-twig-filter-section-heading span {
    background: #334155;
    color: #cbd5e1;
}

.dark .fi-stylus-twig-filter-item,
.dark .fi-stylus-twig-filter-option {
    border-color: #334155;
    background: #1e293b;
}

.dark .fi-stylus-twig-filter-item-dragging {
    border-color: #38bdf8;
}

.dark .fi-stylus-twig-filter-option:hover {
    border-color: #0369a1;
    background: rgb(12 74 110 / 0.35);
}

.dark .fi-stylus-twig-filter-icon {
    background: rgb(12 74 110 / 0.55);
    color: #7dd3fc;
}

.dark .fi-stylus-twig-filter-icon[data-stylus-twig-color="gray"] {
    background: rgb(51 65 85 / 0.65);
    color: #cbd5e1;
}

.dark .fi-stylus-twig-filter-icon[data-stylus-twig-color="primary"] {
    background: rgb(49 46 129 / 0.55);
}

.dark .fi-stylus-twig-filter-icon[data-stylus-twig-color="success"] {
    background: rgb(20 83 45 / 0.55);
}

.dark .fi-stylus-twig-filter-icon[data-stylus-twig-color="warning"] {
    background: rgb(120 53 15 / 0.55);
}

.fi-stylus-twig-condition-rule-option[data-stylus-twig-color="gray"] svg {
    color: #64748b;
}

.dark .fi-stylus-twig-condition-rule-option[data-stylus-twig-color="gray"] svg {
    color: #94a3b8;
}

.dark .fi-stylus-twig-filter-copy > span {
    color: #f8fafc;
}

.dark .fi-stylus-twig-filter-action {
    color: #94a3b8;
}

.dark .fi-stylus-twig-filter-action:hover {
    background: #334155;
    color: #f8fafc;
}

.dark .fi-stylus-twig-condition-rule-negate:hover span {
    background: #334155;
    color: #f8fafc;
}

.dark .fi-stylus-twig-condition-rule-negate input:checked + span {
    background: rgb(146 64 14 / 0.4);
    color: #fcd34d;
}

.dark .fi-stylus-twig-filter-remove:hover {
    background: rgb(127 29 29 / 0.45);
    color: #fca5a5;
}

.dark .fi-stylus-twig-filter-empty {
    border-color: #475569;
}

.dark .fi-stylus-twig-panel-actions {
    border-color: #334155;
}

.dark .fi-stylus-twig-panel-action {
    border-color: #475569;
    background: #0f172a;
    color: #cbd5e1;
}

.dark .fi-stylus-twig-panel-action:hover {
    border-color: #64748b;
    background: #1e293b;
    color: #f8fafc;
}

.dark .fi-stylus-twig-panel-action:disabled {
    border-color: #334155;
    background: #0f172a;
    color: #64748b;
}

.dark .fi-stylus-twig-panel-action-active {
    border-color: #0369a1;
    background: rgb(12 74 110 / 0.45);
    color: #7dd3fc;
}

.dark .fi-stylus-twig-panel-action-active:hover {
    border-color: #0284c7;
    background: rgb(12 74 110 / 0.65);
    color: #bae6fd;
}

.dark .fi-stylus-twig-panel-action-danger {
    border-color: #7f1d1d;
    color: #fca5a5;
}

.dark .fi-stylus-twig-panel-action-danger:hover {
    border-color: #991b1b;
    background: rgb(127 29 29 / 0.35);
    color: #fecaca;
}

.dark .fi-stylus-twig-variable-search {
    border-color: #475569;
    background: #1e293b;
    color: #94a3b8;
}

.dark .fi-stylus-twig-variable-search input {
    color: #f8fafc;
}

.dark .fi-stylus-twig-variable-samples {
    color: #94a3b8;
}

.dark .fi-stylus-twig-variable-samples:hover,
.dark .fi-stylus-twig-variable-samples-active {
    background: rgb(12 74 110 / 0.35);
    color: #7dd3fc;
}

.dark .fi-stylus-twig-variable-panel-heading,
.dark .fi-stylus-twig-variable-label {
    color: #f8fafc;
}

.dark .fi-stylus-twig-variable-panel-description,
.dark .fi-stylus-twig-variable-description,
.dark .fi-stylus-twig-variable-group-heading,
.dark .fi-stylus-twig-variable-meta,
.dark .fi-stylus-twig-variable-empty {
    color: #94a3b8;
}

.dark .fi-stylus-twig-variable-panel-close {
    color: #94a3b8;
}

.dark .fi-stylus-twig-variable-panel-close:hover {
    background: #1e293b;
    color: #f8fafc;
}

.dark .fi-stylus-twig-variable-group-button {
    border-color: #475569;
    background: #0f172a;
}

.dark .fi-stylus-twig-variable-group-button:hover {
    border-color: #0369a1;
    background: #1e293b;
}

.dark .fi-stylus-twig-variable-group-chevron {
    background: rgb(12 74 110 / 0.55);
    color: #7dd3fc;
}

.dark .fi-stylus-twig-variable-group-count,
.dark .fi-stylus-twig-variable-meta > span {
    background: #334155;
}

.dark .fi-stylus-twig-variable-group-count {
    color: #cbd5e1;
}

.dark .fi-stylus-twig-variable-row-nested::before {
    border-color: #475569;
}

.dark .fi-stylus-twig-variable-actions {
    border-color: #334155;
    background: #1e293b;
}

.dark .fi-stylus-twig-variable-actions:hover {
    border-color: #0369a1;
    background: rgb(12 74 110 / 0.35);
}

.dark .fi-stylus-twig-variable-group-clear {
    color: #94a3b8;
}

.dark .fi-stylus-twig-variable-group-clear:hover {
    color: #7dd3fc;
}

.dark .fi-stylus-twig-variable-favorite:hover {
    background: rgb(113 63 18 / 0.35);
    color: #fde047;
}

.dark .fi-stylus-twig-variable-favorite-active {
    color: #facc15;
}

.dark .fi-stylus-twig-variable-meta code {
    color: #7dd3fc;
}

.dark .fi-stylus-twig-panel-resizer::before {
    background: #475569;
}

.dark .fi-stylus-twig-panel-resizer:hover::before,
.dark .fi-stylus-twig-panel-resizer:focus-visible::before,
.dark .fi-stylus-twig-inline-panels-resizing .fi-stylus-twig-panel-resizer::before {
    background: #38bdf8;
}

@supports (container-type: inline-size) {
    @container (min-width: 42rem) {
        .fi-stylus-twig-inline-panels {
            width: var(--fi-stylus-twig-panel-width, 16rem);
            min-width: 16rem;
            max-width: min(45rem, calc(100% - 20rem)) !important;
            flex: 0 1 var(--fi-stylus-twig-panel-width, 16rem);
        }

        .fi-stylus-twig-panel-resizer {
            display: block;
        }
    }
}

@supports not (container-type: inline-size) {
    @media (min-width: 48rem) {
        .fi-stylus-twig-inline-panels {
            width: var(--fi-stylus-twig-panel-width, 16rem);
            min-width: 16rem;
            max-width: min(45rem, calc(100% - 20rem)) !important;
            flex: 0 1 var(--fi-stylus-twig-panel-width, 16rem);
        }

        .fi-stylus-twig-panel-resizer {
            display: block;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-stylus-twig-variable-actions,
    .fi-stylus-twig-variable-group-button,
    .fi-stylus-twig-variable-group-chevron,
    .fi-stylus-twig-snippet-button,
    .fi-stylus-twig-filter-item,
    .fi-stylus-twig-filter-option,
    .fi-stylus-twig-panel-action,
    .fi-stylus-twig-panel-resizer::before {
        transition: none;
    }
}