.mk--seo .mk-screen {
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    padding: 1.2em;
    font-size: clamp(6px, 2.2cqw, 16px);
    color: var(--text-primary);
    background: var(--bg-card);
}

.seo-search {
    display: flex;
    align-items: center;
    gap: 0.6em;
    height: 2.2em;
    padding: 0 0.9em;
    border-radius: 2em;
    border: 1px solid var(--border-subtle);
    background: var(--bg-deep);
    flex: none;
}

.seo-search svg {
    width: 1.1em;
    height: 1.1em;
    stroke: var(--text-muted);
    flex: none;
}

.seo-query {
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
}

.rea.is-live .seo-query {
    animation: seoType 1.1s steps(24) 0.35s forwards;
}

@keyframes seoType {
    to { max-width: 18em; }
}

.seo-caret {
    width: 1px;
    height: 1.1em;
    background: var(--accent);
    opacity: 0;
}

.rea.is-live .seo-caret {
    animation: seoCaret 0.75s steps(1) 0.35s 3;
}

@keyframes seoCaret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.seo-map {
    display: flex;
    gap: 0.8em;
    align-items: stretch;
    flex: none;
}

.seo-map-canvas {
    position: relative;
    width: 6.5em;
    height: 4.6em;
    border-radius: 0.4em;
    flex: none;
    background:
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.07) 48% 52%, transparent 52%),
        linear-gradient(0deg, transparent 40%, rgba(255, 255, 255, 0.07) 40% 44%, transparent 44%),
        linear-gradient(160deg, rgba(78, 205, 196, 0.08), rgba(168, 85, 247, 0.1));
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.seo-pin {
    position: absolute;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--text-muted);
}

.seo-pin--1 { top: 26%; left: 22%; }
.seo-pin--2 { top: 58%; left: 62%; }

.seo-pin--3 {
    top: 38%;
    left: 44%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-soft);
}

.rea.is-live .seo-pin--3 {
    animation: seoPin 2.4s ease-out 1.5s infinite;
}

@keyframes seoPin {
    0% { box-shadow: 0 0 0 0 var(--accent-soft); }
    70%, 100% { box-shadow: 0 0 0 1.4em rgba(168, 85, 247, 0); }
}

.seo-map-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55em;
    flex: 1;
    color: var(--text-primary);
}

.seo-results {
    position: relative;
    flex: 1;
    min-height: 15.2em;
    color: var(--text-primary);
}

.seo-row {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45em;
    padding-left: 0.8em;
    border-left: 2px solid transparent;
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
}

.seo-row--a { transform: translateY(0); }
.seo-row--b { transform: translateY(4.2em); }
.seo-row--c { transform: translateY(8.4em); }
.seo-row--target { transform: translateY(12.6em); }

.rea.is-live .seo-row--a { transform: translateY(4.2em); transition-delay: 1.9s; }
.rea.is-live .seo-row--b { transform: translateY(8.4em); transition-delay: 1.9s; }
.rea.is-live .seo-row--c { transform: translateY(12.6em); transition-delay: 1.9s; }

.rea.is-live .seo-row--target {
    transform: translateY(0);
    transition-delay: 1.9s;
}

.seo-row--target {
    border-left-color: var(--accent);
}

.seo-row-name {
    font-size: 0.78em;
    color: var(--accent);
    white-space: nowrap;
}

.seo-badge {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    font-size: 0.72em;
    padding: 0.15em 0.6em;
    border-radius: 2em;
    background: var(--accent-soft);
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rea.is-live .seo-badge {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition-delay: 2.7s;
}

@media (prefers-reduced-motion: reduce) {
    .mk-anim,
        .app-slot,
        .seo-badge {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
}

@media (prefers-reduced-motion: reduce) {

        .seo-row {
            transition: none !important;
        }
}

@media (prefers-reduced-motion: reduce) {
    .seo-row--target { transform: translateY(0) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .seo-row--a { transform: translateY(4.2em) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .seo-row--b { transform: translateY(8.4em) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .seo-row--c { transform: translateY(12.6em) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .seo-query {
            max-width: 18em !important;
            animation: none !important;
        }
}