/* =================================================================== DISPATCH.AI — bespoke styles Layer order: Tailwind CDN loads first (in ), this file after. =================================================================== */ /* ===== SQUARE SAFETY NET (after Tailwind) — 3-layer enforcement #2 ===== */ *{ border-radius:0 !important; } .is-round, .dot, #voiceOrbFallback{ border-radius:9999px !important; } :root{ --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-hover: cubic-bezier(0.4,0,0.2,1); --mx: 50%; --my: 50%; } html,body{background:#ffffff;color:#171717;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} /* fixed 64px nav: keep anchored sections clear of the header on jump */ html{scroll-padding-top:80px;} body{font-family:'Geist',sans-serif;letter-spacing:-0.01em;overflow-x:hidden;} ::selection{background:rgba(99,91,255,0.16);} /* ===== EYEBROW — single source of truth: ::before injects the "// " ===== */ .eyebrow{font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.1em;color:#737373;text-transform:uppercase;} .eyebrow::before{content:"// ";color:#737373;} .mono{font-family:'Geist Mono',monospace;} .tnum{font-variant-numeric:tabular-nums;} /* Footer column heads: mono caps, but NO "// " prefix (distinct from eyebrow) */ .foot-head{font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.1em;color:#737373;text-transform:uppercase;} /* ===== TYPE SCALE (named tokens — one governing place) ===== */ .h1{font-size:clamp(44px,7vw,84px);font-weight:600;letter-spacing:-0.045em;line-height:1.05;color:#0a0a0a;} .h2{font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;color:#0a0a0a;} .h3{font-size:19px;font-weight:600;letter-spacing:-0.02em;color:#0a0a0a;} .lead{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:#595959;font-weight:400;} /* Hero whisper sheen (NO clip, NO bottom curve) */ .hero-sheen{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 50% at 30% 20%, rgba(99,91,255,0.05), transparent 70%); animation:sheen 22s ease-in-out infinite alternate; } @keyframes sheen{ 0%{transform:translate3d(0,0,0) scale(1);opacity:.9;} 100%{transform:translate3d(5%,4%,0) scale(1.1);opacity:.55;} } /* Nav glass */ .nav-scrolled{background:rgba(255,255,255,0.8);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #eaeaea;} /* Buttons (square) */ .btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;font-size:14px;font-weight:500;transition:background .15s var(--ease-hover),border-color .15s var(--ease-hover),transform .15s var(--ease-hover),color .15s;letter-spacing:-0.01em;white-space:nowrap;} .btn-primary{background:#635bff;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);} .btn-primary:hover{background:#5a52e8;transform:translateY(-1px);} .btn-ghost{background:#fff;color:#171717;border:1px solid #eaeaea;} .btn-ghost:hover{border-color:#d6d6d6;background:#fafafa;} /* btn-dark carries the inset-top-highlight for layered monochrome depth */ .btn-dark{background:#0a0a0a;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);} .btn-dark:hover{background:#262626;transform:translateY(-1px);} .link-arrow{display:inline-flex;align-items:center;gap:6px;color:#171717;font-weight:500;font-size:14px;transition:color .15s;} .link-arrow svg{transition:transform .15s var(--ease-hover);color:#635bff;} .link-arrow:hover{color:#0a0a0a;} .link-arrow:hover svg{transform:translateX(4px);} /* Bento */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:#eaeaea;border:1px solid #eaeaea;overflow:hidden;} .cell{position:relative;background:#fff;padding:24px;overflow:hidden;transition:transform .16s var(--ease-hover),box-shadow .16s;} .cell::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 85% 0%, rgba(99,91,255,0.045), transparent 60%);opacity:.6;} /* hover-lift: transform-only (translateY), layered monochrome shadow */ .cell:hover{transform:translateY(-2px);z-index:5;box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(10,10,10,.04), 0 8px 24px -12px rgba(10,10,10,.12);} /* cursor spotlight overlay: accent + mono depth layer */ .bento::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:6; background: radial-gradient(circle 200px at var(--mx) var(--my), rgba(99,91,255,0.06), transparent), radial-gradient(circle 220px at var(--mx) var(--my), rgba(17,17,17,0.03), transparent); opacity:0;transition:opacity .3s;} .bento-wrap{position:relative;} .bento-wrap:hover .bento::before{opacity:1;} /* status dots */ .dot{width:8px;height:8px;display:inline-block;flex:none;} .dot-idle{background:#737373;} .dot-run{background:#635bff;} .dot-done{background:#16a34a;} .dot-paused{background:#f59e0b;} .dot-error{background:#ef4444;} .dot-test{background:#0ea5a4;} .pulse-run{animation:pulseRun 1.5s var(--ease-hover) infinite;} @keyframes pulseRun{0%,100%{box-shadow:0 0 0 0 rgba(99,91,255,0.45);}50%{box-shadow:0 0 0 5px rgba(99,91,255,0);}} .pulse-amber{animation:pulseAmber 1.5s var(--ease-hover) infinite;} @keyframes pulseAmber{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0.5);}50%{box-shadow:0 0 0 5px rgba(245,158,11,0);}} /* node card */ .node{position:relative;background:#fff;border:1px solid #eaeaea;padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:13px;transition:border-color .25s, box-shadow .25s, opacity .3s;} .node .nlabel{font-family:'Geist Mono',monospace;font-size:12px;color:#171717;letter-spacing:0;} .node.is-running{border-color:#635bff;box-shadow:0 0 0 3px rgba(99,91,255,0.08);} .node.is-done{border-color:#16a34a55;} .node.is-paused{border-color:#f59e0b66;} /* ===== HUMAN-REVIEW CHECKPOINT NODE — roomy, square, on-brand ===== Shared by the live-run bento cell + any inline preview. Comfortable padding, gaps and min-widths so the Approve/Reject pair never squishes. */ .review-node{position:relative;background:#fff;border:1px solid #eaeaea; padding:14px 14px 13px;display:flex;flex-direction:column;gap:12px; transition:border-color .25s, box-shadow .25s, opacity .3s;} .review-node.is-running{border-color:#635bff;box-shadow:0 0 0 3px rgba(99,91,255,0.08);} .review-node.is-done{border-color:#16a34a55;} .review-node.is-paused{border-color:#f59e0b66;} .review-head{display:flex;align-items:center;gap:8px;} .review-head .nlabel{font-family:'Geist Mono',monospace;font-size:12px;color:#171717;letter-spacing:0;} .review-actions{display:flex;gap:10px;} .review-btn{flex:1 1 0;min-width:96px;min-height:36px; display:inline-flex;align-items:center;justify-content:center; font-size:12.5px;font-weight:500;letter-spacing:-0.005em; border:1px solid #eaeaea;background:#fff; transition:background .15s var(--ease-hover),border-color .15s var(--ease-hover),color .15s;cursor:pointer;} .review-approve{color:#15803d;border-color:rgba(22,163,74,.30);background:rgba(22,163,74,.06);} .review-approve:hover{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.45);} .review-reject{color:#c0322a;border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.06);} .review-reject:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.45);} /* marching edges */ .edge{stroke:#d4d4d4;stroke-width:1.5;fill:none;stroke-linecap:round;} .edge.draw{stroke-dasharray:160;stroke-dashoffset:160;animation:drawEdge .6s var(--ease-out) forwards;} .edge.active{stroke:#635bff;stroke-dasharray:6 6;animation:march 1s linear infinite;} @keyframes drawEdge{to{stroke-dashoffset:0;}} @keyframes march{to{stroke-dashoffset:-12;}} /* terminal caret */ .caret{display:inline-block;width:7px;height:15px;background:#171717;margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite;} .caret-light{background:#e5e5e5;} @keyframes blink{50%{opacity:0;}} /* reveal — only hidden when JS is present (.js on ) */ .js .reveal{opacity:0;transform:translateY(16px);} .js .reveal.in{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);} .tilt{transition:transform .25s var(--ease-hover);transform-style:preserve-3d;will-change:transform;} .commit-tex{background-image:radial-gradient(#171717 1px, transparent 1px);background-size:14px 14px;opacity:0.05;} .grid-tex{background-image:linear-gradient(#eaeaea 1px,transparent 1px),linear-gradient(90deg,#eaeaea 1px,transparent 1px);background-size:24px 24px;} /* ===== DROP-INTO-CANVAS micro-demo — crisp dotted grid + square drop target ===== */ .drop-stage{ background-color:#fff; background-image:radial-gradient(#e2e2e2 1.1px, transparent 1.1px); background-size:16px 16px; background-position:-1px -1px; } .drop-slot{ display:grid;place-items:center; border:1.5px dashed #cfcfcf; background:rgba(255,255,255,0.6); color:#737373; font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.04em; transition:border-color .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out); } .drop-stage.is-armed .drop-slot{ border-color:#635bff; background:rgba(99,91,255,0.06); color:#635bff; } .dropchip{transition:transform .35s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s;} .dropchip:hover{border-color:#635bff;} /* provider dropdown */ .picker{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s var(--ease-out),opacity .2s;} .prov-cell:hover .picker{max-height:120px;opacity:1;} /* ===== BADGE — mixed-case, NO uppercase, NO "// " prefix (hero "Open source · MIT") ===== */ .badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #eaeaea;background:#fff;padding:5px 10px;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.02em;color:#737373;} /* terminal window — light/white surface on the square white theme */ .term{background:#fafafa;border:1px solid #eaeaea;color:#171717;} .term-bar{border-bottom:1px solid #eaeaea;background:#fff;} .term-dot{width:8px;height:8px;border:1px solid #d6d6d6;background:#fff;} /* MODELS.md editor — light/white code surface to match the white terminal */ .codewin{background:#fafafa;border:1px solid #eaeaea;} .ln{color:#b3b3b3;user-select:none;} /* handoff baton path */ .handoff-node{transition:border-color .3s,box-shadow .3s,opacity .3s;} /* contribution heatmap — grayscale → accent ramp */ .heat{width:11px;height:11px;} .heat-0{background:#ededed;} .heat-1{background:#dcd9fb;} .heat-2{background:#b9b3f7;} .heat-3{background:#8d85f2;} .heat-4{background:#635bff;} /* roadmap soon badge — bordered, no fill, no glow; uppercase via CSS */ .soon{border:1px solid #eaeaea;background:#fff;color:#737373;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.12em;padding:3px 7px;text-transform:uppercase;} /* drag chip */ .dragchip{transition:transform .2s var(--ease-out),box-shadow .2s;} /* voice state chip */ .vchip{border:1px solid #eaeaea;background:#fff;color:#595959;font-family:'Geist Mono',monospace;font-size:12px;padding:7px 12px;transition:border-color .18s var(--ease-hover),color .18s var(--ease-hover),box-shadow .18s var(--ease-hover);cursor:pointer;} .vchip:hover{border-color:#d6d6d6;} .vchip.active{border-color:#635bff;color:#0a0a0a;box-shadow:0 0 0 3px rgba(99,91,255,0.08);} /* =================================================================== CHAT vs CANVAS — two-column comparison (square, hairline) =================================================================== */ .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;} @media (max-width:760px){ .cmp-grid{grid-template-columns:1fr;} } .cmp-col{background:#fff;padding:28px;display:flex;flex-direction:column;} .cmp-col-accent{background:linear-gradient(180deg, rgba(99,91,255,0.025), #fff 60%);} /* old-way chat thread */ .cmp-thread{display:flex;flex-direction:column;gap:10px;} .cmp-bubble{border:1px solid #eaeaea;background:#fafafa;padding:9px 12px;max-width:88%;} .cmp-bubble p{font-size:13px;line-height:1.5;color:#595959;margin:0;} .cmp-bubble .cmp-role{display:block;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#737373;margin-bottom:4px;} .cmp-bubble .cmp-role-ai{color:#737373;} .cmp-you{align-self:flex-end;background:#fff;} .cmp-ai{align-self:flex-start;} .cmp-muted{color:#a3a3a3;} .cmp-wait{display:flex;align-items:center;gap:5px;align-self:flex-start;padding:4px 2px;} .cmp-dot{width:5px;height:5px;background:#cfcfcf;display:inline-block;border-radius:9999px !important;} .cmp-wait .cmp-dot{animation:cmpWait 1.2s ease-in-out infinite;} .cmp-wait .cmp-dot:nth-child(2){animation-delay:.16s;} .cmp-wait .cmp-dot:nth-child(3){animation-delay:.32s;} @keyframes cmpWait{0%,100%{opacity:.3;}50%{opacity:1;}} .cmp-punch{font-family:'Geist Mono',monospace;font-size:14px;font-weight:500;letter-spacing:-0.01em;color:#0a0a0a;margin-top:auto;} /* ===== canvas side: a real mini-canvas (dotted grid, run header, rich nodes) ===== */ .cmp-canvas{position:relative;border:1px solid #eaeaea;background:#fff;display:flex;flex-direction:column;} /* run header */ .cmp-canvas-head{display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid #eaeaea;background:#fff;padding:0 12px;height:38px;flex:none;} .cmp-run-btn{display:inline-flex;align-items:center;gap:6px; font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.02em; color:#fff;background:#0a0a0a;padding:5px 10px;} .cmp-run-btn svg{color:#fff;} .cmp-canvas.is-done .cmp-run-btn{background:#15803d;} .cmp-canvas-meta{display:inline-flex;align-items:center;gap:7px; font-family:'Geist Mono',monospace;font-size:11px;color:#737373;letter-spacing:0.02em;} /* dotted-grid canvas surface */ .cmp-flow{position:relative;flex:1;padding:18px 16px; background-color:#fcfcfd; background-image:radial-gradient(#e4e4ea 1.1px, transparent 1.1px); background-size:15px 15px;background-position:-1px -1px;} .cmp-flow-edges{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;} .cmp-flow-nodes{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;} /* drawn accent edges — draw on reveal, then a soft flow marches downstream */ .cmp-edge{stroke:#cdd0f7;stroke-width:1.6;fill:none;stroke-linecap:round; stroke-dasharray:60;stroke-dashoffset:60;} .in .cmp-canvas .cmp-edge{animation:cmpDraw .55s var(--ease-out) forwards;} .in .cmp-canvas .cmp-edge:nth-child(1){animation-delay:.15s;} .in .cmp-canvas .cmp-edge:nth-child(2){animation-delay:.35s;} .in .cmp-canvas .cmp-edge:nth-child(3){animation-delay:.55s;} @keyframes cmpDraw{to{stroke-dashoffset:0;stroke:#635bff;stroke-opacity:.55;}} /* once drawn, a marching accent dash signals live dataflow */ .in .cmp-canvas .cmp-edge.flow{stroke:#635bff;stroke-opacity:.55; stroke-dasharray:5 7;animation:cmpMarch 1.1s linear infinite;} @keyframes cmpMarch{to{stroke-dashoffset:-24;}} /* rich node card */ .cmp-cnode{background:#fff;border:1px solid #eaeaea;padding:11px 12px 10px; box-shadow:0 1px 2px rgba(10,10,10,.03); transition:border-color .25s,box-shadow .25s,transform .2s var(--ease-hover);} .cmp-cnode:hover{transform:translateY(-1px);box-shadow:0 6px 18px -10px rgba(10,10,10,.18);border-color:#dcdce6;} .cmp-cnode-head{display:flex;align-items:center;gap:8px;} .cmp-cnode-head .nlabel{font-family:'Geist Mono',monospace;font-size:12.5px;color:#171717;letter-spacing:0;} .cmp-badge{margin-left:auto;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.02em; color:#737373;border:1px solid #eaeaea;background:#fafafa;padding:2px 6px;white-space:nowrap;} .cmp-badge-accent{color:#635bff;border-color:#635bff55;background:rgba(99,91,255,0.05);} .cmp-cnode-instr{margin-top:7px;font-size:12.5px;line-height:1.45;color:#595959;} .cmp-ctx{color:#171717;border-bottom:1px solid #cdd0f7;} .cmp-cnode-out{margin-top:7px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.01em; color:#8a8a8a;display:flex;align-items:center;gap:6px;} .cmp-cnode-out::before{content:'→';color:#b3b3b3;} .cmp-cnode-out-accent{color:#635bff;} .cmp-cnode-out-accent::before{color:#635bff;} .cmp-cnode.is-running{border-color:#635bff;box-shadow:0 0 0 3px rgba(99,91,255,0.08);} @media (prefers-reduced-motion: reduce){ .cmp-wait .cmp-dot{animation:none;opacity:.5;} .cmp-edge{stroke-dashoffset:0 !important;stroke:#635bff;stroke-opacity:.5;animation:none !important;} } /* =================================================================== ANALYTICS — node-delegated cost tracking (bento cell) Each node meters its own spend; per-node rolls up into a total, shown beside the per-model breakdown. Square, hairline, mono. =================================================================== */ .anly-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:1px;background:#eaeaea;border:1px solid #eaeaea;} @media (max-width:680px){ .anly-grid{grid-template-columns:1fr;} } .anly-panel{background:#fff;padding:14px 15px;display:flex;flex-direction:column;} .anly-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #eaeaea;} .anly-cap,.anly-cap-r{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#737373;} /* per-node delegated rows */ .anly-rows{display:flex;flex-direction:column;gap:9px;} .anly-row{display:flex;align-items:center;gap:9px;font-family:'Geist Mono',monospace;font-size:12px;} .anly-node{color:#171717;letter-spacing:0;} .anly-tok{margin-left:auto;color:#737373;font-size:11px;font-variant-numeric:tabular-nums;} .anly-cost{color:#171717;font-size:12px;font-variant-numeric:tabular-nums;min-width:42px;text-align:right;} .anly-total{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:11px;border-top:1px solid #eaeaea; font-family:'Geist Mono',monospace;font-size:12px;} .anly-total .anly-node{color:#0a0a0a;font-weight:500;} .anly-total .anly-cost{color:#635bff;font-weight:500;} /* per-model breakdown bars */ .anly-mrow{display:flex;flex-direction:column;gap:6px;} .anly-mtop{display:flex;align-items:center;justify-content:space-between;font-family:'Geist Mono',monospace;font-size:12px;} .anly-bar{height:6px;background:#f0f0f0;width:100%;overflow:hidden;} .anly-bar > span{display:block;height:100%;background:#635bff;} .anly-bar > span[style*="30%"]{background:#8d85f2;} .anly-bar > span[style*="13%"]{background:#b9b3f7;} /* =================================================================== AGENTIC STREAMING — 20-agent parallel fan-out showpiece CSS-driven, staggered via --d per tile; JS only flips .is-active on the stage (single class), so the whole wave is GPU-friendly + timer-free. =================================================================== */ .stream-fan{position:relative;} .stream-fan svg{display:block;} .stream-fan-line{fill:none;stroke:#eaeaea;stroke-width:1.25;} /* accent pulse races along the fan lines once the stage is active */ .is-active .stream-fan-line{stroke:#635bff;stroke-opacity:.5;stroke-dasharray:5 7;animation:streamMarch 1.1s linear infinite;} .is-active .stream-fan-up .stream-fan-line{animation:streamMarchUp 1.1s linear infinite;} @keyframes streamMarch{to{stroke-dashoffset:-24;}} /* merge/fan-in: paths are drawn agents → result, so a NEGATIVE dashoffset makes the current travel TOWARD the result (convergence), matching fan-out. */ @keyframes streamMarchUp{to{stroke-dashoffset:-24;}} .stream-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px;background:#eaeaea;border:1px solid #eaeaea; } @media (max-width:760px){ .stream-grid{grid-template-columns:repeat(4,1fr);} } @media (max-width:480px){ .stream-grid{grid-template-columns:repeat(2,1fr);} } /* one agent tile */ .agent{ position:relative;background:#fff;padding:10px 11px;overflow:hidden; display:flex;flex-direction:column;gap:8px;min-height:74px; transition:box-shadow .25s var(--ease-out); } .agent-head{display:flex;align-items:center;gap:7px;} .agent-id{font-family:'Geist Mono',monospace;font-size:11px;color:#737373;letter-spacing:0.02em;} .agent-state{margin-left:auto;font-family:'Geist Mono',monospace;font-size:10px;color:#b3b3b3;letter-spacing:0.04em;} /* the per-tile status dot drives idle → running → done by class on .agent */ .agent .a-dot{width:7px;height:7px;flex:none;background:#cfcfcf;transition:background .25s var(--ease-out);} /* streaming log track — three faint mono bars that "sweep" while running */ .agent-log{display:flex;flex-direction:column;gap:4px;} .agent-bar{height:3px;background:#f0f0f0;width:100%;position:relative;overflow:hidden;} .agent-bar::after{ content:'';position:absolute;inset:0;width:40%; background:linear-gradient(90deg,transparent,rgba(99,91,255,0.55),transparent); transform:translateX(-120%); } /* RUNNING — dot accent, edge glow, sweep bars animate (staggered by --d) */ .is-active .agent.is-running{box-shadow:inset 0 0 0 1px rgba(99,91,255,0.35);} .is-active .agent.is-running .a-dot{background:#635bff;} .is-active .agent.is-running .agent-state{color:#635bff;} .is-active .agent.is-running .agent-bar::after{animation:streamSweep 1.05s var(--ease-out) infinite;} .is-active .agent.is-running .agent-bar:nth-child(2)::after{animation-delay:.16s;} .is-active .agent.is-running .agent-bar:nth-child(3)::after{animation-delay:.32s;} @keyframes streamSweep{0%{transform:translateX(-120%);}100%{transform:translateX(320%);}} /* DONE — dot green, bars fill solid */ .is-active .agent.is-done .a-dot{background:#16a34a;} .is-active .agent.is-done .agent-state{color:#16a34a;} .is-active .agent.is-done .agent-bar{background:#dff0e4;} .is-active .agent.is-done .agent-bar::after{display:none;} /* the wave: each tile lights and finishes on a stagger driven by --d. We animate a CSS var-timed class swap purely with animation-delay on a marker element per tile (see .agent-life). Keeps it to ONE rAF-free system. */ .agent-life{position:absolute;inset:0;pointer-events:none;} /* result node lights up when the wave converges */ .stream-result-done{border-color:#16a34a55 !important;} /* reduced-motion / no-JS → static finished state (all done, no sweep) */ @media (prefers-reduced-motion: reduce){ .stream-fan-line{stroke:#635bff;stroke-opacity:.35;} } /* =================================================================== ADVANCED ORCHESTRATION CONTROL — tidy square grid of control cards =================================================================== */ .ctrl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;} .ctrl{position:relative;background:#fff;padding:22px;display:flex;flex-direction:column;transition:transform .16s var(--ease-hover),box-shadow .16s;} .ctrl:hover{transform:translateY(-2px);z-index:5;box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(10,10,10,.04), 0 8px 24px -12px rgba(10,10,10,.12);} .ctrl-diagram{width:100%;height:80px;margin-top:auto;} /* small square chips + arrows */ .ctrl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;} .ctrl-chip{border:1px solid #eaeaea;background:#fff;color:#171717;font-family:'Geist Mono',monospace;font-size:11px;padding:5px 8px;letter-spacing:0.02em;} .ctrl-chip-amber{border-color:#f59e0b66;color:#b06d05;} .ctrl-chip-error{border-color:#ef444455;color:#c0322a;} .ctrl-chip-accent{border-color:#635bff66;color:#635bff;} .ctrl-arrow{font-family:'Geist Mono',monospace;font-size:12px;color:#737373;} /* concurrency lanes — 4 active accent, 2 queued grey */ .ctrl-lanes{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:auto;} .ctrl-lane{height:22px;border:1px solid #eaeaea;background:#f6f6f6;} .ctrl-lane.on{border-color:#635bff66;background:rgba(99,91,255,0.08);} @media (max-width:1000px){ .ctrl-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:540px){ .ctrl-grid{grid-template-columns:1fr;} } /* =================================================================== LOCAL-NETWORK COLLABORATION — dotted stage + roaming cursors Cursors are driven by ONE rAF loop over precomputed paths (app.js). IntersectionObserver gates it; reduced-motion keeps the inline static left/top from the markup (no JS movement). =================================================================== */ .collab-stage{background:#fff;} .collab-canvas{ position:relative;overflow:hidden; height:440px; background-color:#fff; background-image:radial-gradient(#e2e2e2 1.1px, transparent 1.1px); background-size:22px 22px;background-position:-1px -1px; } @media (max-width:640px){ .collab-canvas{height:380px;} } /* node cards sitting on the stage */ .collab-node{position:absolute;background:#fff;border:1px solid #eaeaea;padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:0 1px 2px rgba(10,10,10,.03);transition:border-color .25s,box-shadow .25s;} .collab-node .nlabel{font-family:'Geist Mono',monospace;font-size:12px;color:#171717;letter-spacing:0;} /* a node flashes a selection ring when a cursor "selects" it */ .collab-node.is-selected{border-color:#635bff;box-shadow:0 0 0 3px rgba(99,91,255,0.10);} /* roaming cursor — square pointer + mono name tag */ .collab-cursor{position:absolute;top:0;left:0;display:flex;align-items:flex-start;gap:0;pointer-events:none;will-change:transform;z-index:10;} .collab-cursor svg{display:block;color:var(--cc);filter:drop-shadow(0 1px 1px rgba(10,10,10,.18));} /* tag: fill = cursor colour (var), text = white */ .collab-tag{margin-top:9px;margin-left:-2px;background:var(--cc);color:#fff;font-family:'Geist Mono',monospace;font-size:10px;line-height:1;letter-spacing:0.04em;padding:3px 5px;box-shadow:0 1px 2px rgba(10,10,10,.16);} @media (prefers-reduced-motion: reduce){ .collab-cursor{transition:none;} } /* =================================================================== FEATURE DIRECTORY — dense clickable cards → feature pages Square, hover-lift, accent affordance, "open →" cue. Premium density. =================================================================== */ .feat-grouphead{display:flex;align-items:center;gap:14px;} .feat-rule{flex:1;height:1px;background:#eaeaea;} .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#eaeaea;border:1px solid #eaeaea;overflow:hidden;} @media (max-width:900px){ .feat-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:520px){ .feat-grid{grid-template-columns:1fr;} } .feat-card{position:relative;display:flex;flex-direction:column;background:#fff;padding:18px 18px 16px;min-height:158px;text-decoration:none; transition:transform .16s var(--ease-hover),box-shadow .16s var(--ease-hover),background .16s;} .feat-card::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 88% 0%, rgba(99,91,255,0.05), transparent 60%);opacity:0;transition:opacity .2s;} .feat-card:hover{transform:translateY(-2px);z-index:5;background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(10,10,10,.04), 0 10px 26px -14px rgba(10,10,10,.16);} .feat-card:hover::after{opacity:1;} /* accent affordance: top hairline turns accent on hover */ .feat-card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:#635bff;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out);} .feat-card:hover::before{transform:scaleX(1);} .feat-top{display:flex;align-items:center;gap:8px;} .feat-tag{margin-left:auto;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:#737373;border:1px solid #eaeaea;padding:2px 6px;white-space:nowrap;} .feat-title{margin-top:12px;font-family:'Geist',sans-serif;font-size:15px;font-weight:600;letter-spacing:-0.02em;color:#0a0a0a;line-height:1.2;} .feat-desc{margin-top:7px;font-size:12.5px;line-height:1.5;color:#595959;} .feat-open{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:6px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.04em;color:#737373;transition:color .15s;} .feat-open svg{color:#635bff;transition:transform .15s var(--ease-hover);} .feat-card:hover .feat-open{color:#0a0a0a;} .feat-card:hover .feat-open svg{transform:translateX(3px);} .feat-card-accent{background:linear-gradient(180deg, rgba(99,91,255,0.03), #fff 60%);} /* =================================================================== FEATURE CLUSTER — cards-of-cards: one cohesive bordered surface that wraps every labelled feature group. Tightens the page rhythm so the directory reads as a single panel, not stacked islands. =================================================================== */ .feat-cluster{position:relative;border:1px solid #eaeaea;background:#fff;overflow:hidden;} /* animated hairline edge: an accent line sweeps the top rule when in view */ .feat-cluster::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%; background:linear-gradient(90deg,transparent, #635bff 40%, #635bff 60%, transparent); transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out);} .feat-cluster.in::before{transform:scaleX(1);} /* shared cursor spotlight across the whole grouped surface */ .feat-cluster::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6; background: radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), rgba(99,91,255,0.05), transparent), radial-gradient(circle 240px at var(--mx,50%) var(--my,50%), rgba(17,17,17,0.025), transparent); opacity:0;transition:opacity .3s;} .feat-cluster:hover::after{opacity:1;} /* group inside the cluster: a labelled cluster of feature tiles */ .feat-group{position:relative;} .feat-group + .feat-group{border-top:1px solid #eaeaea;} /* group head sits inside the panel, on a faint tint rail for grouping */ .feat-group .feat-grouphead{padding:14px 18px 12px;background:#fafafa;border-bottom:1px solid #eaeaea;} /* grid loses its own outer border — the cluster provides the frame */ .feat-group .feat-grid{border:0;background:#eaeaea;} /* staggered scroll reveal for tiles within a group */ .js .feat-cluster .feat-card{opacity:0;transform:translateY(12px);} .js .feat-cluster.in .feat-card{opacity:1;transform:none; transition:opacity .5s var(--ease-out),transform .5s var(--ease-out), box-shadow .16s var(--ease-hover),background .16s;} .js .feat-cluster.in .feat-card:nth-child(1){transition-delay:.04s;} .js .feat-cluster.in .feat-card:nth-child(2){transition-delay:.10s;} .js .feat-cluster.in .feat-card:nth-child(3){transition-delay:.16s;} .js .feat-cluster.in .feat-card:nth-child(4){transition-delay:.22s;} /* ===== STATUS CHIP — square, mono, subtle. Dot + label, on-brand ===== */ .feat-status{display:inline-flex;align-items:center;gap:6px; font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase; color:#737373;border:1px solid #eaeaea;background:#fff;padding:3px 7px;white-space:nowrap;line-height:1;} .feat-status .sdot{width:6px;height:6px;border-radius:9999px !important;display:inline-block;flex:none;} .feat-status-active{color:#15803d;border-color:#16a34a33;} .feat-status-active .sdot{background:#16a34a;} .feat-status-dev{color:#b06d05;border-color:#f59e0b33;} .feat-status-dev .sdot{background:#f59e0b;} .feat-status-plan{color:#737373;border-color:#eaeaea;} .feat-status-plan .sdot{background:#737373;} .feat-status-test{color:#0c7c7a;border-color:#0ea5a433;} .feat-status-test .sdot{background:#0ea5a4;} /* streaming → feature-page footer CTA */ .stream-cta .link-arrow svg{transition:transform .15s var(--ease-hover);} .stream-cta:hover .link-arrow svg{transform:translateX(3px);} /* collab inline comment bubble (collaboration upgrade) */ .collab-comment{position:absolute;display:flex;align-items:stretch;z-index:9;box-shadow:0 2px 6px rgba(10,10,10,.10);} .collab-comment-tag{background:var(--cc);color:#fff;font-family:'Geist Mono',monospace;font-size:10px;line-height:1;letter-spacing:0.04em;padding:5px 6px;display:flex;align-items:center;} .collab-comment-body{background:#fff;border:1px solid #eaeaea;border-left:0;color:#171717;font-size:12px;line-height:1;padding:5px 9px;display:flex;align-items:center;white-space:nowrap;} /* =================================================================== END CTA — boxed, ALIVE closing moment (square; cursor spotlight + parallax; "250" credits burning down; running node-chain; magnetic GitHub button). All motion IO-gated in app.js; RM static fallback. =================================================================== */ .cta-panel{position:relative;overflow:hidden;border:1px solid #eaeaea;background:#fff; box-shadow:0 1px 0 rgba(17,17,17,0.02);} /* dotted-grid texture (subtle parallax drift via --px/--py written in app.js) */ .cta-tex{position:absolute;inset:-8px;pointer-events:none; background-image:radial-gradient(#171717 1px, transparent 1px); background-size:18px 18px; transform:translate(var(--px,0px),var(--py,0px)); opacity:0.05;transition:transform .25s var(--ease-out);} /* cursor-reactive accent spotlight — follows --mx/--my, soft default glow */ .cta-glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle 380px at var(--mx,75%) var(--my,30%), rgba(99,91,255,0.13), transparent 70%); transition:background .2s var(--ease-out);} .cta-rail{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid #eaeaea;background:rgba(255,255,255,0.72); backdrop-filter:saturate(1.1);padding:0 22px;height:46px;} /* two-column body: story | live ledger */ .cta-body{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:32px; padding:36px 24px 40px;} @media (min-width:920px){ .cta-body{grid-template-columns:1.25fr 0.95fr;gap:44px; padding:52px 48px 56px;align-items:center;} } /* ---- LEFT: story + stats + actions ---- */ .cta-head{font-size:clamp(28px,3.8vw,44px);font-weight:600;letter-spacing:-0.04em; line-height:1.06;color:#0a0a0a;} .cta-head-accent{color:#635bff;} .js .reveal .cta-head{opacity:0;transform:translateY(10px);} .js .reveal.in .cta-head{opacity:1;transform:none; transition:opacity .55s var(--ease-out) .12s,transform .55s var(--ease-out) .12s;} .cta-sub{margin-top:18px;max-width:34rem;font-size:clamp(14.5px,1.6vw,16px); line-height:1.62;color:#595959;} .js .reveal .cta-sub{opacity:0;transform:translateY(8px);} .js .reveal.in .cta-sub{opacity:1;transform:none; transition:opacity .5s var(--ease-out) .22s,transform .5s var(--ease-out) .22s;} /* stat row — three square mono stats, staggered in */ .cta-stats{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;} .cta-stat{flex:1 1 0;min-width:104px;border:1px solid #eaeaea;background:#fff; padding:12px 14px;display:flex;flex-direction:column;gap:3px; opacity:0;transform:translateY(10px);} .js .reveal.in .cta-stat{opacity:1;transform:none; transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);} .js .reveal.in .cta-stat:nth-child(1){transition-delay:.30s;} .js .reveal.in .cta-stat:nth-child(2){transition-delay:.38s;} .js .reveal.in .cta-stat:nth-child(3){transition-delay:.46s;} .cta-stat-n{font-size:26px;font-weight:600;letter-spacing:-0.04em;color:#0a0a0a;line-height:1;} .cta-stat-l{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.02em; color:#737373;} .cta-actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;} .js .reveal .cta-actions{opacity:0;transform:translateY(8px);} .js .reveal.in .cta-actions{opacity:1;transform:none; transition:opacity .5s var(--ease-out) .52s,transform .5s var(--ease-out) .52s;} /* ---- RIGHT: live ledger stage ---- */ .cta-stage{position:relative;border:1px solid #eaeaea;background:#fff; display:flex;flex-direction:column; opacity:0;transform:translateY(12px);} .js .reveal.in .cta-stage{opacity:1;transform:none; transition:opacity .6s var(--ease-out) .2s,transform .6s var(--ease-out) .2s;} .cta-stage-head{display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid #eaeaea;padding:0 14px;height:40px;} /* the BURNING 250 */ .cta-burn{position:relative;padding:26px 18px 20px;display:flex;flex-direction:column; align-items:center;text-align:center;border-bottom:1px solid #eaeaea; background:linear-gradient(180deg,rgba(99,91,255,0.03),transparent);} .cta-burn-n{font-size:clamp(64px,9vw,92px);font-weight:600;letter-spacing:-0.05em; line-height:.92;color:#635bff;font-variant-numeric:tabular-nums; text-shadow:0 0 26px rgba(99,91,255,0.18);} .cta-burn.is-spent .cta-burn-n{text-shadow:0 0 20px rgba(99,91,255,0.14);} .cta-burn-unit{margin-top:8px;font-family:'Geist Mono',monospace;font-size:11px; letter-spacing:0.12em;text-transform:uppercase;color:#737373;} .cta-burn-bar{margin-top:16px;width:100%;height:3px;background:#eaeaea;overflow:hidden;} .cta-burn-bar > span{display:block;height:100%;width:0%;background:#635bff; box-shadow:0 0 8px rgba(99,91,255,0.5);transition:width .05s linear;} /* running node-chain — signal current marches down the edges */ .cta-chain{position:relative;padding:18px 18px 20px;display:flex;flex-direction:column; gap:20px;align-items:center;} .cta-chain-edges{position:absolute;left:50%;top:0;transform:translateX(-50%); width:60px;height:100%;pointer-events:none;} .cta-edge{stroke:#eaeaea;stroke-width:1.5;fill:none;} .cta-edge.flow{stroke:#635bff;stroke-dasharray:5 7;animation:ctaFlow .9s linear infinite;} @keyframes ctaFlow{to{stroke-dashoffset:-24;}} .cta-cnode{position:relative;z-index:1;width:160px;max-width:100%;background:#fff; border:1px solid #eaeaea;padding:9px 11px;display:flex;align-items:center;gap:8px;} .cta-cnode .nlabel{font-family:'Geist Mono',monospace;font-size:12px;color:#171717;} .cta-cnode.is-live{border-color:#635bff;box-shadow:0 0 0 3px rgba(99,91,255,0.08);} @media (prefers-reduced-motion: reduce){ .cta-tex{transform:none;} .cta-burn-bar > span{width:100% !important;} .cta-edge.flow{animation:none;stroke-dasharray:none;} } /* footer backer credit (kept ONLY in footer now) */ .foot-backer{display:inline-flex;align-items:center;gap:6px;border:1px solid #eaeaea;background:#fff;color:#595959;font-family:'Geist Mono',monospace;font-size:11.5px;padding:5px 9px;} .foot-backer::before{content:'';width:5px;height:5px;background:#635bff;display:inline-block;} @media (prefers-reduced-motion: reduce){ .cta-num{transform:none;opacity:1;} } /* sr-only */ .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;} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} .js .reveal{opacity:1;transform:none;} .hero-sheen{display:none;} } /* focus ring keeps outline only; square corners covered by global net */ :focus-visible{outline:2px solid #635bff;outline-offset:2px;} /* responsive bento collapse — keep 1px hairline gaps + square corners */ @media (max-width:900px){ .bento{grid-template-columns:repeat(6,1fr);} .cell{grid-column:span 6 !important;grid-row:auto !important;} .cell.span-half{grid-column:span 3 !important;} } @media (max-width:560px){ .bento{grid-template-columns:1fr;} .cell, .cell.span-half{grid-column:span 1 !important;} } /* ===== MOBILE NAV PANEL LINKS — ≥44px tap targets, square ===== */ .nav-mobile-link{display:flex;align-items:center;min-height:44px;font-size:15px;color:#171717;border-bottom:1px solid #eaeaea;transition:color .15s;} .nav-mobile-link:last-of-type{border-bottom:0;} .nav-mobile-link:hover{color:#635bff;} /* =================================================================== NAV — canonical pattern (desktop tabs + Features mega-menu + mobile sheet) Feature pages copy this verbatim; only href prefixes change. =================================================================== */ /* Primary desktop tabs */ .nav-tab{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 14px;font-size:14px;font-weight:500;color:#595959;background:transparent;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s;white-space:nowrap;cursor:pointer;} .nav-tab:hover{color:#0a0a0a;background:#f5f5f5;} .nav-tab-btn{font-family:inherit;line-height:1;} .nav-caret{transition:transform .2s var(--ease-out);opacity:.7;} /* Features mega-menu */ .nav-tab-wrap{position:relative;} .nav-tab-wrap.is-open > .nav-tab-btn{color:#0a0a0a;background:#f5f5f5;} .nav-tab-wrap.is-open .nav-caret{transform:rotate(180deg);} .nav-mega{ position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px); width:min(1060px,calc(100vw - 40px)); background:#fff;border:1px solid #eaeaea;box-shadow:0 1px 0 rgba(10,10,10,0.02),0 24px 56px -18px rgba(10,10,10,0.22); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),visibility .16s; z-index:60; } .nav-mega[hidden]{display:block;} /* keep transitions; visibility gates interaction */ .nav-tab-wrap.is-open .nav-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);} .nav-mega-inner{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#eaeaea;} .nav-mega-col{background:#fff;padding:22px 18px;display:flex;flex-direction:column;gap:3px;} .nav-mega-head{margin-bottom:13px;} .nav-mega-link{display:flex;align-items:center;gap:9px;min-height:38px;padding:7px 10px;margin:0 -10px;font-size:13.5px;color:#595959;transition:color .13s,background .13s;} .nav-mega-link:hover{color:#0a0a0a;background:#f7f7f8;} .nav-mega-link.is-active{color:#0a0a0a;background:#f4f4f6;font-weight:500;} .nav-mega-link .dot{flex:0 0 auto;} .nav-mega-foot{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 22px;border-top:1px solid #eaeaea;font-family:'Geist Mono',monospace;font-size:12.5px;color:#171717;background:#fafafa;transition:background .13s,color .13s;} .nav-mega-foot:hover{background:#f2f2f3;color:#635bff;} .nav-mega-foot svg{color:#635bff;transition:transform .15s var(--ease-hover);} .nav-mega-foot:hover svg{transform:translateX(3px);} /* Mobile sheet */ .nav-sheet{position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid #eaeaea;box-shadow:0 18px 40px -20px rgba(10,10,10,0.2);max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;} .nav-sheet-inner{max-width:1140px;margin:0 auto;padding:8px 24px 18px;display:flex;flex-direction:column;} /* Mobile Features accordion */ .nav-acc-btn{width:100%;background:transparent;border:0;border-bottom:1px solid #eaeaea;font-family:inherit;cursor:pointer;} .nav-acc-btn[aria-expanded="true"]{color:#635bff;} .nav-acc-btn[aria-expanded="true"] .nav-caret{transform:rotate(180deg);} .nav-acc-panel{padding:6px 0 10px;border-bottom:1px solid #eaeaea;} .nav-acc-panel[hidden]{display:none;} .nav-acc-group{padding:10px 0 4px;} .nav-acc-group > .eyebrow{display:block;margin-bottom:6px;} .nav-acc-link{display:flex;align-items:center;gap:9px;min-height:40px;padding-left:2px;font-size:14px;color:#595959;transition:color .13s;} .nav-acc-link:hover{color:#0a0a0a;} .nav-acc-link.is-active{color:#0a0a0a;font-weight:500;} .nav-acc-link .dot{flex:0 0 auto;} @media (prefers-reduced-motion: reduce){ .nav-mega,.nav-caret,.nav-mega-foot svg{transition:none;} } /* ===== TAP-TARGET FLOOR (≥40px) — keep square corners ===== */ /* provider tabs in model-hotswap */ #provTabs button{min-height:40px;display:inline-flex;align-items:center;} /* voice state chips */ .vchip{min-height:40px;display:inline-flex;align-items:center;} /* human-review + live-run approve/reject controls */ .review-btn{min-height:40px;} /* copy / clone-line button */ #copyBtn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;} /* model-hotswap model rows (clickable in app.js) */ #modelList > *{min-height:40px;display:flex;align-items:center;} /* ===== MOBILE LEGIBILITY + OVERFLOW SAFETY (≤640px) ===== */ @media (max-width:640px){ /* live-run bento: keep nodes + edges from clipping; give vertical room */ #liveRunStage{height:360px;} /* terminal stays legible, no shrink below readable size */ #termBody{font-size:12.5px;} /* MODELS.md window: prevent code from forcing horizontal scroll of page */ #modelsMd{overflow-x:auto;} /* handoff: stack the three provider stages so labels stay legible */ #handoffStage > .grid{grid-template-columns:1fr;gap:1.25rem;} #handoffStage > .grid .node{width:100%;} /* hide the horizontal baton path that assumes a 3-across row */ #handoffSvg{display:none;} /* drag+drop demo: keep chip + slot inside the stage */ #dropStage{height:140px;} /* clone command line scrolls within its box, never the page */ #cloneLine{max-width:100%;} } /* fixed-width handoff nodes shouldn't overflow narrow columns */ .handoff-node{max-width:100%;} /* ===== GRID-TRACK BLOWOUT GUARD ===== Grid/flex items default to min-width:auto (= min-content), so an unbreakable string (e.g. the git-clone URL) forces its track wider than the viewport. Allow these items to shrink so overflow:auto can scroll. */ .bento, .bento > *, [class*="grid-cols"] > *, .feat-grid, .feat-grid > *, .term, .codewin, #modelsMd, #cloneLine{ min-width:0; } #cloneLine{ display:block; } /* feature-card desc must wrap, never widen its track */ .feat-desc, .feat-title{ overflow-wrap:anywhere; } /* feature cluster + its grids must shrink, never widen the viewport */ .feat-cluster, .feat-cluster .feat-grid, .feat-cluster .feat-grid > *{ min-width:0; } /* reduced-motion: feature cluster reveals + animated hairline resolve to static */ @media (prefers-reduced-motion: reduce){ .js .feat-cluster .feat-card{opacity:1;transform:none;} .feat-cluster::before{transform:scaleX(1);transition:none;} .feat-cluster::after{display:none;} } /* collab inline comment: keep it inside the canvas on narrow widths */ @media (max-width:640px){ .collab-comment{ display:none; } } /* ============ MODEL PROMPT — flagship: prompt → self-assembling graph ============ */ .eyebrow.teal{color:#0c7c7a;} .eyebrow.teal::before{color:#0c7c7a;} .mp-flag{min-width:0;} .mp-flag-body{display:grid;grid-template-columns:0.92fr 1.08fr;gap:1px;background:#eaeaea;} .mp-flag-left{background:#fff;padding:22px 24px;display:flex;flex-direction:column;min-width:0;} .mp-flag-stagewrap{background:#fff;display:flex;flex-direction:column;min-width:0;} @media (max-width:860px){ .mp-flag-body{grid-template-columns:1fr;} } .mp-flag-prompt{font-family:'Geist Mono',monospace;font-size:13px;line-height:1.6;color:#171717; border:1px solid #eaeaea;background:#fafafa;padding:11px 13px;min-height:42px;overflow-wrap:anywhere;} .mp-flag-caret{display:inline-block;width:7px;height:14px;background:#0ea5a4;margin-left:1px; vertical-align:-2px;animation:mpfBlink 1s step-end infinite;} @keyframes mpfBlink{0%,55%{opacity:1;}56%,100%{opacity:0;}} .mp-flag-chips{display:flex;flex-direction:column;gap:7px;} .mpf-chip{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid #eaeaea;background:#fff; padding:8px 11px;font-size:12.5px;color:#595959;cursor:pointer; transition:border-color .2s var(--ease-out),color .2s,background .2s;} .mpf-chip:hover{border-color:#d4d4d4;color:#171717;} .mpf-chip .mpf-chip-dot{flex:none;width:7px;height:7px;border:1px solid #d4d4d4;background:#fff;} .mpf-chip.on{border-color:#0ea5a455;color:#171717;background:rgba(14,165,164,0.04);} .mpf-chip.on .mpf-chip-dot{border-color:#0ea5a4;background:#0ea5a4;} .mp-flag-reason{flex:1;} .mpf-log{font-family:'Geist Mono',monospace;font-size:11.5px;line-height:1.75;min-height:108px;color:#595959;} .mpf-log-row{display:flex;gap:8px;padding:1px 0;opacity:0;transform:translateY(2px); animation:mpfLogIn .35s var(--ease-out) forwards;} @keyframes mpfLogIn{to{opacity:1;transform:none;}} .mpf-log-mark{color:#0ea5a4;flex:none;} .mpf-log-mark-done{color:#16a34a;} /* the dotted stage the graph assembles into — clipped, no overflow */ .mpf-stage{position:relative;flex:1;min-height:340px;overflow:hidden;background:#fff; background-image:radial-gradient(#ededed 1px,transparent 1px);background-size:18px 18px;} .mpf-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;} .mpf-edge{fill:none;stroke:#635bff;stroke-width:1.5;stroke-dasharray:5 5;stroke-dashoffset:0; opacity:0;transition:opacity .35s;} .mpf-edge.in{opacity:.85;animation:mpfMarch .7s linear infinite;} @keyframes mpfMarch{to{stroke-dashoffset:-20;}} .mpf-node{position:absolute;width:172px;background:#fff;border:1px solid #eaeaea;padding:9px 11px; opacity:0;transform:translateY(6px) scale(.98); transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),border-color .25s,box-shadow .25s;} .mpf-node.in{opacity:1;transform:none;} .mpf-node.placing{border-color:#0ea5a4;box-shadow:0 0 0 3px rgba(14,165,164,0.1);} .mpf-node-head{display:flex;align-items:center;gap:8px;} .mpf-node-name{font-size:12.5px;font-weight:500;color:#171717;} .mpf-node-sub{margin-top:5px;font-family:'Geist Mono',monospace;font-size:10px;color:#737373; display:flex;align-items:center;gap:5px;flex-wrap:wrap;} .mpf-pill{border:1px solid #eaeaea;padding:1px 5px;font-size:9.5px;color:#595959;} .mpf-pill-accent{border-color:#0ea5a433;color:#0c7c7a;background:rgba(14,165,164,0.05);} @media (max-width:540px){ .mpf-node{width:148px;} .mpf-stage{min-height:300px;} } /* reduced motion: graph resolves to its finished static frame, no marching */ @media (prefers-reduced-motion: reduce){ .mpf-node{transition:none;opacity:1;transform:none;} .mpf-edge{transition:none;opacity:.85;} .mpf-edge.in{animation:none;} .mp-flag-caret{animation:none;opacity:0;} .mpf-log-row{animation:none;opacity:1;transform:none;} }