:root {
    --ka-bg: #070712;
    --ka-surface: rgba(16, 13, 35, .82);
    --ka-line: rgba(166, 139, 255, .22);
    --ka-text: #f6f4ff;
    --ka-muted: rgba(232, 228, 255, .66);
    --ka-cyan: #00e6ff;
    --ka-green: #48f1a2;
    --ka-purple: #ae8bff;
    --ka-gold: #ffdc7a;
}

.ka-page { min-height: 100vh; padding: 8.5rem 5% 5rem; color: var(--ka-text); background: radial-gradient(circle at 12% 8%, rgba(0, 230, 255, .08), transparent 28rem), radial-gradient(circle at 88% 18%, rgba(174, 139, 255, .12), transparent 32rem), var(--ka-bg); font-family: 'Azeret Mono', 'JetBrains Mono', monospace; }
.ka-hero { max-width: 1160px; margin: 0 auto 2.5rem; text-align: center; }
.ka-eyebrow, .ka-kicker { color: var(--ka-green); font-size: .7rem; letter-spacing: .16em; font-weight: 700; }
.ka-hero h1 { margin: .8rem 0 1rem; font-family: 'Orbitron', sans-serif; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.08; }
.ka-accent { color: var(--ka-cyan); text-shadow: 0 0 22px rgba(0, 230, 255, .3); }
.ka-lede { max-width: 760px; margin: 0 auto; color: var(--ka-muted); font-family: 'Crimson Pro', Georgia, serif; font-size: 1.15rem; line-height: 1.65; }
.ka-architecture { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .55rem; margin-top: 2rem; color: var(--ka-muted); font-size: .7rem; }
.ka-arch-node { padding: .5rem .7rem; border: 1px solid var(--ka-line); border-radius: 999px; background: rgba(30, 25, 57, .75); }
.ka-arch-rag { color: var(--ka-cyan); border-color: rgba(0, 230, 255, .48); }
.ka-arch-model { color: var(--ka-gold); border-color: rgba(255, 220, 122, .45); }
.ka-arch-arrow { color: var(--ka-purple); }
.ka-workspace, .ka-result { max-width: 1160px; margin: 0 auto; }
.ka-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr); gap: 1.1rem; align-items: start; }
.ka-panel, .ka-result { border: 1px solid var(--ka-line); border-radius: 20px; background: var(--ka-surface); box-shadow: 0 18px 70px rgba(0, 0, 0, .22); backdrop-filter: blur(18px); }
.ka-panel { padding: clamp(1.1rem, 3vw, 2rem); }
.ka-panel-heading, .ka-result-heading, .ka-citation-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ka-panel h2, .ka-result h2 { margin: .45rem 0 1.25rem; font-family: 'Orbitron', sans-serif; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.25; }
.ka-language { display: flex; border: 1px solid var(--ka-line); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.ka-lang, .ka-example, .ka-clear { border: 0; color: var(--ka-muted); background: transparent; cursor: pointer; font: inherit; }
.ka-lang { padding: .42rem .62rem; font-size: .68rem; }
.ka-lang.is-active { color: #081019; background: var(--ka-cyan); }
.ka-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ka-query { display: block; width: 100%; box-sizing: border-box; min-height: 9rem; resize: vertical; border: 1px solid rgba(0, 230, 255, .25); border-radius: 14px; padding: 1rem; color: var(--ka-text); background: rgba(3, 5, 17, .8); font: .9rem/1.7 'Azeret Mono', monospace; }
.ka-query:focus { outline: 2px solid var(--ka-cyan); outline-offset: 2px; }
.ka-query-meta { margin-top: .42rem; text-align: right; color: rgba(232, 228, 255, .42); font-size: .68rem; }
.ka-examples { margin-top: 1.25rem; }
.ka-example-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.ka-example { padding: .48rem .7rem; border: 1px solid rgba(174, 139, 255, .3); border-radius: 999px; color: var(--ka-muted); font-size: .7rem; text-align: left; }
.ka-example:hover, .ka-example:focus-visible { color: var(--ka-text); border-color: var(--ka-cyan); }
.ka-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.ka-submit { display: inline-flex; align-items: center; gap: .85rem; border: 1px solid var(--ka-cyan); border-radius: 10px; padding: .8rem 1rem; color: #061017; background: var(--ka-cyan); cursor: pointer; font: 700 .76rem 'Azeret Mono', monospace; }
.ka-submit:hover, .ka-submit:focus-visible { box-shadow: 0 0 24px rgba(0, 230, 255, .3); }
.ka-submit:disabled { opacity: .55; cursor: wait; }
.ka-submit-spinner { display: none; width: .82rem; height: .82rem; box-sizing: border-box; border: 2px solid rgba(6, 16, 23, .28); border-top-color: #061017; border-radius: 50%; }
.ka-submit.is-loading .ka-submit-spinner { display: inline-block; animation: ka-submit-spin .8s linear infinite; }
.ka-submit.is-loading .ka-submit-arrow { display: none; }
.ka-submit-arrow { font-size: 1.1rem; }
.ka-clear { padding: .5rem; font-size: .75rem; }
.ka-lang:disabled, .ka-example:disabled, .ka-clear:disabled { opacity: .45; cursor: wait; }
.ka-status { min-height: 1.3rem; margin-top: 1rem; color: var(--ka-muted); font-size: .75rem; }
.ka-status.is-loading { display: flex; align-items: center; gap: .9rem; min-height: 4.2rem; box-sizing: border-box; padding: .8rem 1rem; border: 1px solid rgba(0, 230, 255, .24); border-radius: 12px; background: linear-gradient(90deg, rgba(0, 230, 255, .07), rgba(174, 139, 255, .06)); color: rgba(246, 244, 255, .84); line-height: 1.55; }
.ka-status.is-error { color: #ff9aab; }
.ka-status.is-degraded { color: var(--ka-gold); }
.ka-status.is-success { color: var(--ka-green); }
.ka-status-message { min-width: 0; }
.ka-loading { position: relative; display: block; flex: 0 0 3.2rem; width: 3.2rem; height: 2rem; }
.ka-loading[hidden] { display: none; }
.ka-loading-track { position: absolute; top: .92rem; left: .32rem; right: .32rem; height: 1px; background: linear-gradient(90deg, var(--ka-cyan), var(--ka-purple), var(--ka-green)); opacity: .5; }
.ka-loading-node { position: absolute; top: .58rem; width: .72rem; height: .72rem; border: 1px solid var(--ka-cyan); border-radius: 50%; background: var(--ka-bg); box-shadow: 0 0 12px rgba(0, 230, 255, .28); animation: ka-evidence-pulse 1.5s ease-in-out infinite; }
.ka-loading-node-a { left: .08rem; }
.ka-loading-node-b { left: 1.25rem; border-color: var(--ka-purple); animation-delay: .2s; }
.ka-loading-node-c { right: .08rem; border-color: var(--ka-green); animation-delay: .4s; }

@keyframes ka-submit-spin { to { transform: rotate(360deg); } }
@keyframes ka-evidence-pulse {
    0%, 100% { transform: scale(.78); opacity: .52; }
    50% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 18px currentColor; }
}
.ka-scope-panel { position: sticky; top: 6rem; }
.ka-scope-panel h2 { margin-bottom: .8rem; }
.ka-scope-panel p { color: var(--ka-muted); font-family: 'Crimson Pro', Georgia, serif; font-size: 1.05rem; line-height: 1.6; }
.ka-scope-list { display: grid; gap: .85rem; margin: 1.3rem 0; }
.ka-scope-list > div { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; color: var(--ka-muted); font-size: .74rem; line-height: 1.55; }
.ka-scope-index { color: var(--ka-cyan); }
.ka-notice { border-left: 2px solid var(--ka-gold); padding: .7rem .8rem; color: rgba(255, 220, 122, .82); background: rgba(255, 220, 122, .06); font-size: .7rem; line-height: 1.55; }
.ka-result { margin-top: 1.1rem; padding: clamp(1.1rem, 3vw, 2rem); }
.ka-trace { color: rgba(232, 228, 255, .4); font-size: .65rem; }
.ka-answer { color: var(--ka-text); font-family: 'Crimson Pro', Georgia, serif; font-size: 1.15rem; line-height: 1.7; }
.ka-answer p { margin: 0 0 .85rem; }
.ka-answer ul { margin: .4rem 0 1rem 1.2rem; padding: 0; }
.ka-answer code { padding: .1rem .3rem; border-radius: 4px; color: var(--ka-cyan); background: rgba(0, 230, 255, .09); font-family: 'Azeret Mono', monospace; font-size: .85em; }
.ka-answer strong { color: var(--ka-green); }
.ka-citation-heading { align-items: baseline; margin-top: 1.7rem; border-top: 1px solid var(--ka-line); padding-top: 1.2rem; }
.ka-citation-heading h3 { margin: 0; font-size: .86rem; }
.ka-source-count { color: var(--ka-muted); font-size: .68rem; }
.ka-citations { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .75rem; margin-top: .8rem; }
.ka-citation { display: flex; flex-direction: column; gap: .55rem; min-height: 8rem; padding: .9rem; border: 1px solid rgba(174, 139, 255, .25); border-radius: 12px; background: rgba(5, 4, 18, .62); }
.ka-citation:hover { border-color: var(--ka-cyan); }
.ka-citation-type { align-self: flex-start; color: var(--ka-green); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.ka-citation-title { color: var(--ka-text); font-family: 'Crimson Pro', Georgia, serif; font-size: 1.02rem; line-height: 1.35; }
.ka-citation-meta { color: var(--ka-muted); font-size: .66rem; line-height: 1.5; }
.ka-citation-link { margin-top: auto; color: var(--ka-cyan); font-size: .68rem; text-decoration: none; }
.ka-citation-link:hover, .ka-citation-link:focus-visible { text-decoration: underline; }
.ka-warnings { margin-top: 1rem; color: var(--ka-gold); font-size: .72rem; line-height: 1.55; }

@media (max-width: 760px) {
    .ka-page { padding: 6.5rem 1rem 3rem; }
    .ka-workspace { grid-template-columns: 1fr; }
    .ka-scope-panel { position: static; }
    .ka-architecture { gap: .4rem; }
    .ka-arch-node { font-size: .63rem; }
    .ka-panel-heading { flex-direction: column; }
    .ka-language { align-self: flex-end; }
    .ka-actions { flex-wrap: wrap; }
    .ka-submit { flex: 1 1 100%; justify-content: center; }
    .ka-status.is-loading { align-items: flex-start; padding: .85rem; }
    .ka-loading { margin-top: .15rem; }
    .ka-result-heading { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .ka-submit.is-loading .ka-submit-spinner,
    .ka-loading-node { animation: none; }
    .ka-loading-node { transform: none; opacity: 1; box-shadow: none; }
}

/* RAG-vs-Agent product-boundary additions */
.ka-boundary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    margin: 1rem auto 0;
}

.ka-boundary-pill,
.ka-provenance-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: .42rem .7rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .025em;
}

.ka-boundary-rag,
.ka-provenance-rag {
    border: 1px solid rgba(0, 230, 255, .42);
    background: rgba(0, 230, 255, .08);
    color: var(--ka-cyan);
}

.ka-boundary-model,
.ka-provenance-model {
    border: 1px solid rgba(255, 220, 122, .38);
    background: rgba(255, 220, 122, .07);
    color: var(--ka-gold);
}

.ka-boundary-arrow {
    color: var(--ka-purple);
    font-size: .78rem;
}

.ka-result-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .55rem;
}

.ka-provenance {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.ka-provenance[hidden],
.ka-rag-link[hidden] {
    display: none;
}

.ka-rag-drilldown {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0 .25rem;
}

.ka-rag-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: .58rem .78rem;
    border: 1px solid rgba(0, 230, 255, .35);
    border-radius: 9px;
    background: rgba(0, 230, 255, .065);
    color: var(--ka-cyan);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.ka-rag-link:hover,
.ka-rag-link:focus-visible {
    border-color: var(--ka-cyan);
    box-shadow: 0 0 20px rgba(0, 230, 255, .18);
}

@media (max-width: 760px) {
    .ka-result-meta {
        align-items: flex-start;
    }

    .ka-provenance {
        justify-content: flex-start;
    }

    .ka-rag-drilldown {
        justify-content: stretch;
    }

    .ka-rag-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}