html { scroll-behavior: smooth; }
        body { font-family: 'Inter', system-ui, sans-serif; }
        .gradient-hero {
            background:
                radial-gradient(900px 400px at 80% -10%, rgba(24, 95, 165, 0.12), transparent 60%),
                radial-gradient(700px 300px at 0% 0%, rgba(16, 185, 129, 0.08), transparent 60%);
        }
        .chat-scroll::-webkit-scrollbar { width: 8px; }
        .chat-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 8px; }
        .typing-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: #94a3b8; display: inline-block; margin-right: 3px;
            animation: typing 1.2s infinite ease-in-out;
        }
        .typing-dot:nth-child(2) { animation-delay: 0.15s; }
        .typing-dot:nth-child(3) { animation-delay: 0.3s; }
        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-3px); opacity: 1; }
        }

        /* ---- Implementation Approach section (spec: interactive diagram) ---- */
        .approach-canvas {
            background:
                radial-gradient(720px 300px at 12% -10%, rgba(24,95,165,.09), transparent 60%),
                radial-gradient(620px 320px at 96% 115%, rgba(16,185,129,.10), transparent 60%),
                #ffffff;
            border:1px solid #e2e8f0;
        }
        .stage { position:relative; width:100%; aspect-ratio:1000 / 340; }
        .stage svg { position:absolute; inset:0; width:100%; height:100%; }
        .stage .lines  { z-index:1; }
        .stage .bubble { z-index:1; pointer-events:none; }   /* behind the nodes - a subtle gimmick */
        .stage .nodes-layer { position:absolute; inset:0; z-index:2; }
        .ap-node {
            position:absolute; background:#fff; border:1px solid #e2e8f0; border-radius:14px;
            display:flex; flex-direction:column; justify-content:center; padding:0 16px;
            transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
        }
        .ap-node.clickable { cursor:pointer; }
        .ap-node.clickable:hover { transform:translateY(-2px); border-color:#88b3d8; box-shadow:0 12px 32px -14px rgba(24,95,165,.45); }
        .ap-node.is-active { border-color:#185FA5; box-shadow:0 0 0 1px #185FA5, 0 14px 36px -16px rgba(24,95,165,.55); }
        .ap-node.n-ctx { background:#eaf3fc; border-color:#cfe0f1; }
        .ap-node.n-cap { background:#f0fdf6; border-color:#c9f0db; }
        .ap-node .open-hint {
            position:absolute; top:9px; right:11px; font-size:9px; letter-spacing:.13em; text-transform:uppercase;
            color:#185FA5; font-weight:800; opacity:0; transition:opacity .2s;
        }
        .ap-node.clickable:hover .open-hint, .ap-node.is-active .open-hint { opacity:.85; }
        .ap-node.agent { box-shadow:0 0 0 3px rgba(24,95,165,.12); }
        .flow { position:relative; height:2px; flex:1 1 26px; min-width:26px;
            background:linear-gradient(90deg,#dbe8f4,#88b3d8); border-radius:2px; }
        .ap-chip {
            border-radius:999px; padding:.4rem .8rem; font-size:.78rem; font-weight:600; cursor:pointer;
            background:#f1f6fb; border:1px solid #dbe8f4; color:#144c84; transition:all .16s ease;
        }
        .ap-chip:hover { background:#dbe8f4; border-color:#88b3d8; transform:translateY(-1px); }
        .ap-chip.is-active { background:#185FA5; border-color:#185FA5; color:#fff; }
        .cap-pill {
            font-size:.72rem; font-weight:700; color:#047857; background:#ecfdf5; border:1px solid #a7f3d0;
            border-radius:8px; padding:.35rem .55rem; text-align:center;
        }
        .ap-detail { display:none; }
        .ap-detail.show { display:block; animation:apRise .3s ease both; }
        @keyframes apRise { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
        .ctx-row { border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; transition:border-color .18s, box-shadow .18s, background .18s; }
        .ctx-row.row-hot { border-color:#185FA5; box-shadow:0 0 0 1px #185FA5; background:#f6faff; }
        .ctx-chevron { transition: transform .22s ease; }

        /* ---- Dark theme overrides (spec 032) ---- */
        .dark .gradient-hero {
            background:
                radial-gradient(900px 400px at 80% -10%, rgba(91,140,255,.16), transparent 60%),
                radial-gradient(700px 300px at 0% 0%, rgba(63,207,142,.10), transparent 60%);
        }
        .dark .chat-scroll::-webkit-scrollbar-thumb { background: #243042; }
        .dark .approach-canvas {
            background:
                radial-gradient(720px 300px at 12% -10%, rgba(91,140,255,.12), transparent 60%),
                radial-gradient(620px 320px at 96% 115%, rgba(63,207,142,.12), transparent 60%),
                #0e141e;
            border-color: #243042;
        }
        .dark .ap-node { background:#141b26; border-color:#243042; }
        .dark .ap-node.clickable:hover { border-color:#5b8cff; box-shadow:0 12px 32px -14px rgba(91,140,255,.5); }
        .dark .ap-node.is-active { border-color:#5b8cff; box-shadow:0 0 0 1px #5b8cff, 0 14px 36px -16px rgba(91,140,255,.55); }
        .dark .ap-node.n-ctx { background:#142235; border-color:#1f3a57; }
        .dark .ap-node.n-cap { background:#10271d; border-color:#1c4634; }
        .dark .ap-node .open-hint { color:#5b8cff; }
        .dark .ap-node.agent { box-shadow:0 0 0 3px rgba(91,140,255,.18); }
        .dark .flow { background:linear-gradient(90deg,#243042,#5b8cff); }
        .dark .ap-chip { background:#141b26; border-color:#243042; color:#a9c6ff; }
        .dark .ap-chip:hover { background:#1b2740; border-color:#5b8cff; }
        .dark .ap-chip.is-active { background:#5b8cff; border-color:#5b8cff; color:#0a0e14; }
        .dark .cap-pill { color:#7ee0b0; background:#10271d; border-color:#1c4634; }
        .dark .ctx-row { border-color:#243042; }
        .dark .ctx-row.row-hot { border-color:#5b8cff; box-shadow:0 0 0 1px #5b8cff; background:#142235; }