.frontier-vlm {
    --frontier-algo-blue: #2563eb;
    --frontier-algo-cyan: #0e7490;
    --frontier-algo-violet: #7c3aed;
    --vlm-purple-soft: #f5f3ff;
}

.frontier-vlm .vlm-pipeline,
.frontier-vlm .vlm-stepper {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.vlm-stage-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: start;
    gap: 10px;
}

.vlm-stage-layout .frontier-stage-card {
    transition: border-color 0.32s var(--frontier-algo-motion), box-shadow 0.32s var(--frontier-algo-motion), transform 0.32s var(--frontier-algo-motion);
}

.vlm-stage-layout[data-step="image"] .vlm-image-panel,
.vlm-stage-layout[data-step="vision"] .vlm-token-panel,
.vlm-stage-layout[data-step="prompt"] .vlm-prompt-panel,
.vlm-stage-layout[data-step="fusion"] .vlm-fusion-panel,
.vlm-stage-layout[data-step="decoder"] .vlm-decoder-panel,
.vlm-stage-layout[data-step="answer"] .vlm-answer-panel,
.vlm-stage-layout[data-step="evidence"] .vlm-answer-panel,
.vlm-stage-layout[data-step="evidence"] .vlm-image-panel {
    border-color: #c4b5fd;
    box-shadow: 0 16px 34px rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.vlm-architecture-panel {
    grid-column: 1 / -1;
    grid-row: 1;
}

.vlm-image-panel {
    grid-column: 1 / span 4;
    grid-row: 2 / span 2;
}

.vlm-token-panel {
    grid-column: 5 / span 8;
    grid-row: 2;
}

.vlm-prompt-panel {
    grid-column: 5 / span 8;
    grid-row: 3;
}

.vlm-fusion-panel {
    grid-column: 1 / -1;
    grid-row: 4;
}

.vlm-decoder-panel {
    grid-column: 1 / span 6;
    grid-row: 5;
}

.vlm-answer-panel {
    display: grid;
    grid-column: 7 / span 6;
    grid-row: 5;
    grid-template-columns: 1fr;
    align-items: start;
}

.vlm-answer-panel .frontier-section-headline {
    grid-column: 1 / -1;
}

.vlm-image-panel .frontier-sample-frame {
    margin: 8px;
    aspect-ratio: 4 / 3;
}

.vlm-patch-layer,
.vlm-evidence-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
}

.vlm-patch-layer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    opacity: 0;
    transition: opacity 0.3s var(--frontier-algo-motion);
}

.vlm-stage-layout[data-step="vision"] .vlm-patch-layer,
.vlm-stage-layout[data-step="fusion"] .vlm-patch-layer,
.vlm-stage-layout[data-step="evidence"] .vlm-patch-layer {
    opacity: 1;
}

.vlm-patch-layer span {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.58);
    color: #ffffff;
    background: rgba(37, 99, 235, 0.13);
    font-size: 10px;
    font-weight: 950;
    animation: vlmTokenIn 0.42s var(--frontier-algo-motion) both;
    animation-delay: var(--vlm-delay, 0ms);
}

.vlm-evidence-box {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border: 2px solid rgba(124, 58, 237, 0.82);
    border-radius: 9px;
    background: rgba(124, 58, 237, calc(var(--score) * 0.18));
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.3s var(--frontier-algo-motion), transform 0.3s var(--frontier-algo-motion);
}

.vlm-stage-layout[data-step="fusion"] .vlm-evidence-box,
.vlm-stage-layout[data-step="decoder"] .vlm-evidence-box,
.vlm-stage-layout[data-step="evidence"] .vlm-evidence-box {
    opacity: 1;
    transform: scale(1);
    animation: vlmEvidencePulse 0.9s var(--frontier-algo-motion) infinite;
    animation-delay: var(--vlm-delay, 0ms);
}

.vlm-evidence-box b {
    position: absolute;
    left: 4px;
    top: -22px;
    border-radius: 999px;
    padding: 3px 7px;
    color: #4c1d95;
    background: #ede9fe;
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
}

.vlm-token-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
}

.vlm-token-strip span {
    display: inline-grid;
    min-height: 26px;
    min-width: 32px;
    place-items: center;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    color: #1e3a8a;
    background: #eff6ff;
    font-size: 11px;
    font-weight: 950;
    animation: vlmTokenIn 0.44s var(--frontier-algo-motion) both;
    animation-delay: var(--vlm-delay, 0ms);
}

.vlm-token-strip--prompt span {
    grid-auto-flow: column;
    gap: 4px;
    color: #5b21b6;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.vlm-token-strip span.is-hot {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.vlm-token-strip b {
    color: #334155;
    font-size: 10px;
}

.vlm-fusion-block {
    display: grid;
    grid-template-columns: minmax(128px, 0.72fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 8px;
    padding: 8px;
}

.vlm-fusion-block > div {
    min-width: 0;
}

.vlm-fusion-block strong {
    display: block;
    margin: 0 0 7px;
    color: #172554;
    font-size: 12px;
    font-weight: 950;
}

.vlm-fusion-core {
    position: relative;
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 126px;
    border: 1px dashed #c4b5fd;
    border-radius: 16px;
    padding: 10px;
    color: #5b21b6;
    background: #f5f3ff;
    text-align: center;
    isolation: isolate;
}

.vlm-fusion-core::before,
.vlm-fusion-core::after {
    content: "";
    position: absolute;
    inset: 24px 18px;
    z-index: -1;
    border-radius: 18px;
    background:
        linear-gradient(24deg, transparent 0 42%, rgba(124, 58, 237, 0.36) 42.5% 44%, transparent 44.5%),
        linear-gradient(-18deg, transparent 0 45%, rgba(37, 99, 235, 0.28) 45.5% 47%, transparent 47.5%),
        radial-gradient(circle at 22% 68%, #7c3aed 0 4px, transparent 5px),
        radial-gradient(circle at 78% 30%, #2563eb 0 4px, transparent 5px),
        radial-gradient(circle at 68% 72%, #0891b2 0 4px, transparent 5px);
    animation: vlmAttentionSweep 0.88s var(--frontier-algo-motion) infinite;
}

.vlm-fusion-core::after {
    inset: 34px 28px;
    opacity: 0.56;
    transform: scaleX(-1);
}

.vlm-fusion-core span {
    font-size: 13px;
    font-weight: 950;
}

.vlm-fusion-core code {
    color: #334155;
    font-size: 10px;
    white-space: normal;
}

.vlm-fusion-core i {
    display: block;
    border-radius: 999px;
    padding: 5px 7px;
    color: #0e7490;
    background: #ecfeff;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    animation: vlmLinkGrow 0.58s var(--frontier-algo-motion) both;
    animation-delay: var(--vlm-delay, 0ms);
}

.vlm-decoder {
    display: grid;
    gap: 8px;
    padding: 8px;
}

.vlm-decoder-core {
    display: grid;
    gap: 5px;
    border: 1px solid #ddd6fe;
    border-radius: 14px;
    padding: 10px;
    background: linear-gradient(180deg, #ffffff, #f5f3ff);
}

.vlm-decoder-core span {
    color: #5b21b6;
    font-size: 13px;
    font-weight: 950;
}

.vlm-decoder-core code {
    color: #334155;
    font-size: 11px;
}

.vlm-answer-stream {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vlm-answer-stream span {
    display: inline-grid;
    min-height: 28px;
    place-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 0 9px;
    color: #172554;
    background: #ffffff;
    font-size: 12px;
    font-weight: 950;
    opacity: 0;
    animation: vlmAnswerIn 0.46s var(--frontier-algo-motion) forwards;
    animation-delay: var(--vlm-delay, 0ms);
}

.vlm-answer-card {
    display: grid;
    gap: 6px;
    margin: 8px;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    padding: 10px;
    background: #fff7ed;
}

.vlm-answer-card span {
    color: #9a3412;
    font-size: 10px;
    font-weight: 950;
}

.vlm-answer-card strong {
    color: #172554;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 950;
}

.vlm-answer-card p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}

.vlm-evidence-scores {
    display: grid;
    gap: 6px;
    padding: 0 8px 8px;
}

.vlm-evidence-scores article {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    animation: vlmTokenIn 0.42s var(--frontier-algo-motion) both;
    animation-delay: var(--vlm-delay, 0ms);
}

.vlm-evidence-scores span,
.vlm-evidence-scores strong {
    color: #334155;
    font-size: 11px;
    font-weight: 950;
}

.vlm-evidence-scores i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #e0e7ff;
}

.vlm-evidence-scores b {
    display: block;
    width: var(--score-width);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
}

.frontier-sample-scene[data-scene="food"] {
    background: linear-gradient(180deg, #f8fafc 0 48%, #e2e8f0 48% 100%);
}

.frontier-sample-scene[data-scene="food"] .f-scene-building,
.frontier-sample-scene[data-scene="food"] .f-scene-sky {
    display: none;
}

.frontier-sample-scene[data-scene="food"] .f-scene-ground {
    inset: 0;
    clip-path: none;
    background: #f1f5f9;
}

.frontier-sample-scene[data-scene="food"] .f-scene-subject {
    left: 26%;
    bottom: 26%;
    width: 48%;
    height: 48%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 39% 42%, #ef4444 0 9%, transparent 10%),
        radial-gradient(circle at 58% 45%, #22c55e 0 9%, transparent 10%),
        radial-gradient(circle at 47% 62%, #f59e0b 0 11%, transparent 12%),
        radial-gradient(circle, #ffffff 0 56%, #cbd5e1 57% 66%, transparent 67%);
}

@keyframes vlmTokenIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vlmEvidencePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.16); }
    50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.08); }
}

@keyframes vlmLinkGrow {
    from { opacity: 0; transform: scaleX(0.72); }
    to { opacity: 1; transform: scaleX(1); }
}

@keyframes vlmAnswerIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes vlmAttentionSweep {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

@media (max-width: 1120px) {
    .vlm-stage-layout,
    .vlm-fusion-block {
        grid-template-columns: 1fr;
    }

    .vlm-architecture-panel,
    .vlm-image-panel,
    .vlm-token-panel,
    .vlm-prompt-panel,
    .vlm-fusion-panel,
    .vlm-decoder-panel,
    .vlm-answer-panel {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .vlm-answer-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .frontier-vlm .vlm-pipeline,
    .frontier-vlm .vlm-stepper {
        grid-template-columns: 1fr;
    }
}