.portal-demo-nav-btn {
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.portal-demo-nav-btn.active {
    transform: translateX(3px);
}
.portal-demo-root {
    font-size: 15px;
    line-height: 1.55;
}
@media (min-width: 768px) {
    .portal-demo-root {
        font-size: 16px;
    }
}
.demo-fade-in {
    animation: demoFadeIn 0.35s ease-out;
}
@keyframes demoFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.demo-pulse {
    animation: demoPulse 1.2s ease-in-out infinite;
}
@keyframes demoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.demo-step-badge {
    font-size: 0.875rem;
}
.demo-step-badge.done {
    background: rgb(16 185 129 / 0.2);
    border-color: rgb(16 185 129 / 0.5);
    color: rgb(110 231 183);
}
.demo-step-badge.active {
    background: rgb(6 182 212 / 0.15);
    border-color: rgb(6 182 212 / 0.5);
    color: rgb(103 232 249);
}
#demo_modal.open {
    opacity: 1;
    pointer-events: auto;
}
#demo_modal.open #demo_modal_content {
    transform: scale(1);
}
#demo_modal_body {
    scrollbar-width: thin;
    scrollbar-color: rgb(51 65 85) transparent;
}
.portal-demo-root table.font-mono {
    table-layout: auto;
}
.portal-demo-root table.font-mono th,
.portal-demo-root table.font-mono td {
    font-size: 10px;
    line-height: 1.3;
}
@media (min-width: 1024px) {
    .portal-demo-root table.font-mono th,
    .portal-demo-root table.font-mono td {
        font-size: 11px;
    }
}