:root{--font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;--font-mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--font-body:Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;--core-bg:#08090d;--core-bg-2:#0d0f15;--core-text:#f4f6fb;--core-muted:#9aa3b2;--core-faint:#6b7585;--core-line:#ffffff1f;--surface:#ffffff0a;--surface-2:#ffffff12;--shadow:0 24px 80px #00000080;--radius:26px;--bond-ms:.46s;--gradient:linear-gradient(135deg, var(--accent), var(--accent-2))}[data-symbiote=react]{--accent:#61dafb;--accent-2:#2bb0d6;--accent-ink:#04121a;--glow:#61dafb33;--radius:26px;--bond-ms:.52s;--membrane:46% 54% 60% 40% / 50% 44% 56% 50%}[data-symbiote=vue]{--accent:#42d392;--accent-2:#35a479;--accent-ink:#04140d;--glow:#42d39233;--radius:34px;--bond-ms:.42s;--membrane:60% 40% 50% 50% / 55% 50% 50% 45%}[data-symbiote=svelte]{--accent:#ff3e00;--accent-2:#d63200;--accent-ink:#fff;--glow:#ff3e0029;--core-bg:#fbf6f2;--core-bg-2:#fff;--core-text:#241008;--core-muted:#7a5c4d;--core-faint:#a78977;--core-line:#28120624;--surface:#28120609;--surface-2:#2812060f;--shadow:0 24px 70px #78280029;--radius:16px;--bond-ms:.24s;--membrane:40% 60% 56% 44% / 46% 40% 60% 54%;color-scheme:light}[data-symbiote=solid]{--accent:#4a8bc2;--accent-2:#2c4f7c;--accent-ink:#fff;--glow:#4a8bc233;--radius:14px;--bond-ms:.3s;--membrane:52% 48% 48% 52% / 50% 52% 48% 50%}[data-symbiote=angular]{--accent:#e40035;--accent-2:#9c0aab;--accent-ink:#fff;--glow:#e400352e;--gradient:linear-gradient(120deg, #e40035, #f6007b, #9c0aab);--radius:24px;--bond-ms:.4s;--membrane:58% 42% 44% 56% / 46% 56% 44% 54%}*{box-sizing:border-box}body{font-family:var(--font-body);color:var(--core-text);background:radial-gradient(120% 80% at 78% -12%, var(--glow), transparent 58%), var(--core-bg);transition:background-color var(--bond-ms) ease, color var(--bond-ms) ease;margin:0}h1,h2{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-weight:600}p{color:var(--core-muted);line-height:1.65}a{color:inherit}.shell{width:min(1180px,100% - 40px);margin:0 auto}.eyebrow{color:var(--accent);font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;transition:color var(--bond-ms) ease;margin-bottom:18px;font-size:.72rem;font-weight:700;display:inline-block}.nav{justify-content:space-between;align-items:center;width:min(1180px,100% - 40px);margin:0 auto;padding:26px 0 8px;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.03em;align-items:center;gap:10px;font-size:1.05rem;font-weight:600;text-decoration:none;display:inline-flex}.brand-mark{background:var(--gradient);width:14px;height:14px;box-shadow:0 0 0 4px var(--glow);transition:background var(--bond-ms) ease, box-shadow var(--bond-ms) ease;border-radius:4px 8px 5px 9px}.nav-links{gap:24px;font-size:.92rem;font-weight:500;display:flex}.nav-links a{color:var(--core-muted);text-decoration:none;transition:color .2s}.nav-links a:hover{color:var(--accent)}.hero{grid-template-columns:1fr .92fr;align-items:center;gap:40px;padding:72px 0 96px;display:grid}.chips{flex-wrap:wrap;gap:10px;margin-bottom:38px;display:flex}.chip{--fw:var(--accent);border:1px solid var(--core-line);background:var(--surface);color:var(--core-text);font-family:var(--font-mono);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:9px 15px;font-size:.82rem;font-weight:700;transition:border-color .2s,background .2s,transform .12s;display:inline-flex}.chip:hover:not(:disabled){border-color:var(--fw);transform:translateY(-1px)}.chip:disabled{cursor:not-allowed;opacity:.52}.chip.is-wip .dot{opacity:.65}.chip[aria-pressed=true]{border-color:var(--fw);background:color-mix(in srgb, var(--fw) 16%, transparent)}.chip .dot{background:var(--fw);border-radius:50%;width:9px;height:9px}.chip .soon{letter-spacing:.1em;text-transform:uppercase;color:var(--core-faint);font-size:.62rem}.chip[data-fw=react]{--fw:#61dafb}.chip[data-fw=vue]{--fw:#42d392}.chip[data-fw=svelte]{--fw:#ff3e00}.chip[data-fw=solid]{--fw:#4a8bc2}.chip[data-fw=angular]{--fw:#e40035}h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.96}.symbiote-name{color:var(--accent);white-space:nowrap;transition:color var(--bond-ms) ease}.symbiote-name:before{content:"⟨ ";opacity:.45}.symbiote-name:after{content:" ⟩";opacity:.45}.lede{max-width:30ch;margin:28px 0 0;font-size:clamp(1.05rem,1.5vw,1.32rem)}.actions{flex-wrap:wrap;gap:12px;margin-top:38px;display:flex}.button{min-height:48px;font-family:var(--font-display);transition:background var(--bond-ms) ease, border-color .2s ease, color .2s ease, transform .12s ease;border:1px solid #0000;border-radius:999px;align-items:center;padding:0 22px;font-weight:600;text-decoration:none;display:inline-flex}.button:hover{transform:translateY(-1px)}.button.primary{color:var(--accent-ink);background:var(--gradient)}.button.secondary{border-color:var(--core-line);background:var(--surface);color:var(--core-text)}.button.secondary:hover,.text-link:hover{border-color:var(--accent);color:var(--accent)}.host{place-items:center;gap:16px;display:grid;position:relative}.host:before{content:"";aspect-ratio:1;background:radial-gradient(circle, var(--glow), transparent 66%);width:min(96%,460px);transition:background var(--bond-ms) ease;position:absolute;top:40%;transform:translateY(-50%)}.symbiote{filter:drop-shadow(0 22px 46px #0006);width:min(104%,460px);position:relative;overflow:visible}.eye,.maw{transform-box:fill-box;transform-origin:50%}[data-symbiote=angular] .maw,[data-symbiote=svelte] .maw{animation:2.4s ease-in-out infinite chomp}.phone-frame{fill:#0b0c12;stroke:color-mix(in srgb, var(--accent) 38%, #ffffff24);stroke-width:2px;transition:stroke var(--bond-ms) ease}.phone-screen-bg{fill:var(--core-bg-2);transition:fill var(--bond-ms) ease}.phone-speaker,.phone-home{fill:#ffffff29}.phone-cam{fill:#ffffff3d}.scr-bar,.scr-btn{fill:var(--accent);transition:fill var(--bond-ms) ease}.scr-title,.scr-btn-label{fill:var(--accent-ink);font-family:var(--font-display);transition:fill var(--bond-ms) ease;font-weight:600}.scr-title{font-size:11px}.scr-btn-label{font-family:var(--font-mono);font-size:8px;font-weight:700}.scr-label{fill:var(--core-faint);font-family:var(--font-mono);letter-spacing:.18em;font-size:7px}.scr-num{fill:var(--core-text);font-family:var(--font-display);transition:fill var(--bond-ms) ease;font-size:32px;font-weight:700}.scr-fw{fill:var(--accent);font-family:var(--font-mono);letter-spacing:.12em;transition:fill var(--bond-ms) ease;font-size:9px;font-weight:700}.goo-front{fill:color-mix(in srgb, var(--accent) 64%, var(--accent-2));transition:fill var(--bond-ms) ease}.sheen{fill:#ffffff38}.eye{fill:#f6fbff;animation:6s ease-in-out infinite blink}.fang{fill:#f6fbff}.lips{fill:none;stroke:#f6fbff;stroke-width:4px;stroke-linecap:round}.saliva{fill:none;stroke:#ffffff80;stroke-width:1.4px;stroke-linecap:round}.eyes,.maw,.lips{display:none}[data-symbiote=react] .eyes-calm,[data-symbiote=react] .mouth-flat,[data-symbiote=vue] .eyes-friendly,[data-symbiote=vue] .mouth-smile,[data-symbiote=svelte] .eyes-angry,[data-symbiote=svelte] .maw-spikes,[data-symbiote=solid] .eyes-slit,[data-symbiote=solid] .mouth-flat,[data-symbiote=angular] .eyes-angry,[data-symbiote=angular] .maw-fanged{display:block}.host-label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--core-faint);margin:0;font-size:.72rem}@keyframes blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.12)}}@keyframes chomp{0%,to{transform:scaleY(1)}50%{transform:scaleY(.76)}}.proof,.traits,.demo,.seam,.status{border:1px solid var(--core-line);background:linear-gradient(180deg, var(--surface-2), var(--surface));box-shadow:var(--shadow);transition:border-color var(--bond-ms) ease, background var(--bond-ms) ease;border-radius:30px}section{margin:26px 0}.proof{grid-template-columns:repeat(3,1fr);display:grid;overflow:hidden}.proof article{padding:36px}.proof article+article{border-left:1px solid var(--core-line)}.tag{border:1px solid color-mix(in srgb, var(--accent) 45%, var(--core-line));color:var(--accent);font-family:var(--font-mono);letter-spacing:.2em;text-transform:uppercase;transition:color var(--bond-ms) ease, border-color var(--bond-ms) ease;border-radius:7px;margin-bottom:22px;padding:4px 11px;font-size:.66rem;font-weight:700;display:inline-block}.proof h2{margin-bottom:12px;font-size:1.5rem}.traits{padding:clamp(28px,5vw,60px)}.traits h2{max-width:22ch;font-size:clamp(1.8rem,3.4vw,3rem)}.traits-lede{max-width:56ch;margin:18px 0 0}.trait-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:36px;display:grid}.trait{border:1px solid var(--core-line);border-radius:calc(var(--radius) * .62);background:var(--surface);transition:border-color var(--bond-ms) ease;flex-direction:column;padding:26px 24px;display:flex}.trait h3{font-family:var(--font-display);letter-spacing:-.01em;margin:0 0 10px;font-size:1.1rem;font-weight:600}.trait p{margin:0;font-size:.94rem}.trait code{color:var(--core-text);font-family:var(--font-mono);background:#ffffff14;border-radius:5px;padding:.1em .4em;font-size:.86em}.trait-fws{flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin:auto 0 0;padding-top:20px;list-style:none;display:flex}.trait-fws li{--fw:var(--accent);background:color-mix(in srgb, var(--fw) 12%, transparent);color:var(--core-muted);font-family:var(--font-mono);letter-spacing:.04em;border-radius:999px;align-items:center;gap:6px;padding:5px 10px 5px 8px;font-size:.7rem;font-weight:700;display:inline-flex}.trait-fws li:before{content:"";background:var(--fw);border-radius:50%;width:7px;height:7px}.trait-fws li[data-fw=react]{--fw:#61dafb}.trait-fws li[data-fw=vue]{--fw:#42d392}.trait-fws li[data-fw=angular]{--fw:#e40035}.demo{grid-template-columns:.85fr 1.15fr;align-items:center;gap:40px;padding:clamp(28px,5vw,60px);display:grid}.demo h2{margin-bottom:16px;font-size:clamp(1.8rem,3.4vw,3rem)}.demo-grid{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}figure{border:1px solid var(--core-line);transition:border-color var(--bond-ms) ease, box-shadow var(--bond-ms) ease;background:#0000003d;border-radius:22px;margin:0;overflow:hidden}figure.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 18px 50px var(--glow)}figure img{width:100%;height:auto;display:block}figcaption{font-family:var(--font-mono);color:var(--core-muted);align-items:center;gap:8px;padding:13px 16px;font-size:.78rem;font-weight:700;display:flex}figcaption .dot{border-radius:50%;width:9px;height:9px}figcaption .dot[data-fw=react]{background:#61dafb}figcaption .dot[data-fw=vue]{background:#42d392}figcaption .dot[data-fw=angular]{background:#e40035}.seam{padding:clamp(28px,5vw,60px)}.seam h2{margin-bottom:32px;font-size:clamp(1.8rem,3.4vw,3rem)}.pipeline{counter-reset:step;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.pipeline li{border:1px solid var(--core-line);background:var(--surface);min-height:96px;color:var(--core-text);font-family:var(--font-mono);border-radius:16px;padding:18px;font-size:.82rem;font-weight:700;position:relative}.pipeline li:before{counter-increment:step;content:"0" counter(step);color:var(--accent);transition:color var(--bond-ms) ease;margin-bottom:10px;font-size:.7rem;display:block}.pipeline li:not(:last-child):after{z-index:2;color:var(--accent);content:"→";transition:color var(--bond-ms) ease;position:absolute;top:50%;right:-13px;transform:translateY(-50%)}.status{padding:clamp(28px,5vw,60px)}.status h2{margin-bottom:28px;font-size:clamp(1.8rem,3.4vw,3rem)}.status ul{gap:10px;margin:0 0 26px;padding:0;list-style:none;display:grid}.status li{--fw:var(--accent);border:1px solid var(--core-line);background:var(--surface);color:var(--core-muted);transition:border-color var(--bond-ms) ease;border-radius:14px;align-items:center;gap:12px;padding:16px 20px;display:flex}.status li[data-fw=react]{--fw:#61dafb}.status li[data-fw=vue]{--fw:#42d392}.status li[data-fw=svelte]{--fw:#ff3e00}.status li[data-fw=solid]{--fw:#4a8bc2}.status li[data-fw=angular]{--fw:#e40035}.status li .dot{background:var(--fw);border-radius:50%;width:10px;height:10px}.status li strong{color:var(--core-text);font-weight:600}.status li .state{color:var(--core-faint);font-size:.92rem}.status li.is-active{border-color:var(--fw);background:color-mix(in srgb, var(--fw) 9%, var(--surface))}.text-link{font-family:var(--font-display);color:var(--accent);transition:color var(--bond-ms) ease;font-weight:600;text-decoration:none}.foot{border-top:1px solid var(--core-line);width:min(1180px,100% - 40px);color:var(--core-faint);flex-wrap:wrap;justify-content:space-between;gap:16px;margin:40px auto 56px;padding-top:24px;font-size:.88rem;display:flex}.foot a{color:var(--core-muted);text-decoration:none}.foot a:hover{color:var(--accent)}.bond-wave{z-index:60;pointer-events:none;border-radius:50%;width:0;height:0;position:fixed;transform:translate(-50%,-50%)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}@media (width<=920px){.hero{grid-template-columns:1fr;padding:48px 0 64px}.host{order:-1}.host-cell{width:240px}.demo,.proof,.demo-grid,.trait-grid{grid-template-columns:1fr}.proof article+article{border-top:1px solid var(--core-line);border-left:0}.pipeline{grid-template-columns:1fr}.pipeline li:not(:last-child):after{top:auto;bottom:-20px;right:50%;transform:translate(50%)rotate(90deg)}}@media (prefers-reduced-motion:reduce){.eye,.maw{animation:none}*{transition-duration:.01ms!important}}
