/* Glitterball home page. Built by content/build.mjs from content/home/. Blog pages use site.css. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Shiori's rhythm: a 640px reading column with two-tone headlines (claim in ink, explanation in grey), and the
   product breaking out to 1180px. The page follows the system theme. Colour appears only as the mark's fringe, the brand logos,
   the halftone field and the walkthrough's blue cursor, which is the product's own.
   Type sizes: 11, 12, 13, 14, 15, 18, 24, 36. Radii: 6, 10, 14 and full. */
:root{
  --paper:#fcfcfc; --sheet:#ffffff; --wash:#f4f4f5; --rule:#e5e5e5;
  --ink:#0a0a0a; --grey:#666666;
  --quiet:#a1a1a1;
  --inv:#171717; --inv-fg:#fafafa;
  --ring:0 0 0 .5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.9);
  --lift:0 0 0 .5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.04),0 24px 60px -24px rgba(20,20,30,.24),0 60px 120px -60px rgba(20,20,30,.28);
  /* The overlay is always dark, on any page, as it is in the product */
  --glass:#111113; --gl-line:rgba(255,255,255,.1); --gl-fg:#fafafa; --gl-fg2:#a1a1aa; --gl-hover:rgba(255,255,255,.1);
  --accent:#3461f5;
  --fr1:#00c8ff; --fr2:#ff0aa0; --fr3:#ffe600; --blend:multiply; --chA:#00c8ff; --chB:#ff0aa0;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --col:720px; --card:0 0 32px rgba(0,0,0,.03),inset 0 0 0 .5px var(--rule); --wide:1180px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#08080a; --sheet:#111113; --wash:#18181b; --rule:#26262b;
    --ink:#fafafa; --grey:#a1a1aa; --quiet:#52525b;
    --inv:#fafafa; --inv-fg:#0a0a0a;
    --ring:0 0 0 .5px rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
    --lift:0 0 0 .5px rgba(255,255,255,.14),0 24px 60px -24px rgba(0,0,0,.7),0 60px 120px -60px rgba(0,0,0,.8);
    --fr1:#ff0040; --fr2:#00ff6a; --fr3:#2a5cff; --blend:screen; --chA:#ff0040; --chB:#2a5cff;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);scroll-padding-top:24px}
body{background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}
a{color:inherit}
p,h1,h2,h3,figure{margin:0}
h1,h2{text-wrap:balance}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.col{max-width:calc(var(--col) + 40px);margin:0 auto;padding-inline:20px}
.wide{max-width:calc(var(--wide) + 40px);margin:0 auto;padding-inline:20px}
svg.i{width:16px;height:16px;fill:currentColor;flex:none}

/* Two-tone headline pair */
.say{display:grid}
.say .a,.say .b{font:500 24px/30px var(--sans);letter-spacing:-.015em}
.say .a{color:var(--ink)}
.say .b{color:var(--grey)}
.step{display:inline-block;margin-bottom:14px;font:500 12px/18px var(--sans);color:var(--grey);letter-spacing:.02em}

/* Top */
.top{display:flex;align-items:center;justify-content:space-between;padding-block:48px 0}
.signin{font:500 15px/1 var(--sans);letter-spacing:-.01em;color:var(--grey);text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.signin:hover{color:var(--ink)}

/* Hero */
.hero{padding-block:88px 0;display:grid;gap:30px}
h1{font:500 40px/46px var(--sans);letter-spacing:-.036em;color:var(--ink);max-width:15em}
.hero .sub{font:500 40px/46px var(--sans);letter-spacing:-.036em;color:var(--grey);margin-top:-28px;max-width:15em}
/* The install line: a full-width snippet, not a button. A grey prompt on the left, Copy on the right. */
.cmd{display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;border:0;border-radius:12px;background:var(--wash);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--rule);font:500 17px/24px var(--sans);text-align:left;cursor:pointer}
.cmd::before{content:"$";color:var(--grey);font-weight:400}
.cmd span{flex:1;min-width:0}
.cmd::after{content:"Copy";color:var(--grey);font-weight:400;font-size:15px}
.cmd:hover::after{color:var(--ink)}
.cmd.did::after{content:"Copied"}
.cmd[hidden]{display:none}
.cmd.say::before{content:none}
/* Two ways in: tell your agent, or run it yourself */
.install{display:grid;gap:10px}
.tabs{display:flex;gap:4px}
.tabs button{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--grey);font:500 15px/1 var(--sans);cursor:pointer;transition:color .15s,background-color .15s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--wash);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--rule)}
.faces{display:inline-flex;margin-left:-6px}
.faces i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sheet,#fff);box-shadow:0 0 0 1.5px var(--paper,#fafafa)}
.faces i+i{margin-left:-6px}
.faces .logo{width:14px;height:14px;color:var(--lc,var(--ink))}

/* Halftone field behind the demo */

/* Browser window */

/* The demo prototype: a small linen shop. It keeps its own light look in both themes, like any prototype would. */

/* The overlay on the demo: cursor, camera bubble, captions and the control bar */
.ov{position:absolute;inset:0;pointer-events:none;font-size:13px}
.cur{position:absolute;left:0;top:0;z-index:3;opacity:0;transition:opacity .3s;will-change:transform}
.cur.on{opacity:1}
.cur svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.cur .tag{position:absolute;left:16px;top:20px;display:flex;align-items:center;gap:6px;white-space:nowrap;padding:3px 10px 3px 3px;border-radius:999px;background:var(--accent);color:#fff;font:600 12px/18px var(--sans);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cur .tag i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:var(--accent);font:700 11px/1 var(--sans);font-style:normal}
.halo{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;opacity:0}
.cur.parked .halo{opacity:1;background:rgba(52,97,245,.18);box-shadow:0 0 0 1.5px var(--accent);animation:halo 1.6s var(--ease) infinite}
@keyframes halo{from{transform:scale(.5);opacity:.95}to{transform:scale(2.1);opacity:0}}
.ripple{position:absolute;z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(52,97,245,.22);box-shadow:0 0 0 2px var(--accent);pointer-events:none;animation:rip .55s var(--ease) forwards}
@keyframes rip{from{transform:scale(.25);opacity:1}to{transform:scale(1.3);opacity:0}}
.dock{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:flex-end;gap:12px}
.cam{position:relative;flex:none;width:76px;height:76px}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}.ring .tr{stroke:rgba(0,0,0,.12)}.ring .dn{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:188.5;transition:stroke-dashoffset .2s linear}
.face{position:absolute;inset:5px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#4a4a52,#1a1a1d 70%);color:#fafafa;font:600 24px/1 var(--sans);overflow:hidden;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.eq{position:absolute;left:50%;bottom:12px;display:flex;align-items:flex-end;gap:2px;height:10px;transform:translateX(-50%)}
.eq i{width:3px;height:3px;border-radius:999px;background:rgba(255,255,255,.6);transition:height .08s}
.stack{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding-right:88px}
.cap,.bar,.ask,.off{background:var(--glass);color:var(--gl-fg);box-shadow:inset 0 0 0 1px var(--gl-line),0 12px 32px -8px rgba(0,0,0,.45)}
.cap{max-width:min(520px,100%);padding:8px 14px;border-radius:10px;font:450 15px/1.45 var(--sans);text-align:center;text-wrap:balance;opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cap.show{opacity:1;transform:none}
.bar{display:flex;align-items:center;gap:2px;padding:5px;border-radius:14px;pointer-events:auto}
.who{display:flex;flex-direction:column;padding:0 10px 0 8px;min-width:0}
.who b{font:600 13px/18px var(--sans);white-space:nowrap}
.who span{font-size:12px;color:var(--gl-fg2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ic{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:10px;background:none;color:var(--gl-fg2);cursor:pointer}
.ic:hover{background:var(--gl-hover);color:var(--gl-fg)}
.ic.play{width:36px;height:36px;border-radius:50%;background:var(--gl-fg);color:#0a0a0a}
.ic.play .pl,.paused .ic.play .pa{display:none}.paused .ic.play .pl{display:block}
.ask,.off{position:absolute;right:16px;top:16px;width:300px;padding:14px;border-radius:14px;pointer-events:auto;animation:rise .35s var(--ease)}
.off{left:50%;right:auto;top:50%;width:min(340px,calc(100% - 32px));transform:translate(-50%,-50%);text-align:center}
@keyframes rise{from{opacity:0;margin-top:10px}}
.ask .q{font:450 14px/1.45 var(--sans);margin-bottom:12px}
.ask .who,.ask .q .who{display:block;padding:0;margin-bottom:4px;font:500 12px/18px var(--sans);color:var(--gl-fg2)}
.ans{display:flex;flex-wrap:wrap;gap:6px}
.off .ans{justify-content:center;margin-top:12px}
.ans button{height:32px;padding-inline:12px;border:0;border-radius:10px;background:var(--gl-hover);color:var(--gl-fg);font:500 13px/1 var(--sans);cursor:pointer}
.ans button:hover,.ans button.hit{background:rgba(255,255,255,.2)}
.ans button.pri{background:var(--gl-fg);color:#0a0a0a}
.tally{margin-top:10px;font-size:12px;color:var(--gl-fg2)}

/* Sections */
section{padding-block:120px 0}
.close{padding-block:120px}

/* 1. Record: the capture bar */
.capbar{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:6px 8px 6px 14px;border-radius:999px;background:var(--glass);color:var(--gl-fg);box-shadow:0 0 0 .5px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.5)}
.capbar .mark{--s:18px}
.rec{display:inline-flex;align-items:center;gap:8px;height:36px;padding-inline:12px 14px;border:0;border-radius:999px;background:var(--gl-hover);color:var(--gl-fg);font:500 14px/1 var(--sans);cursor:pointer}
.rec .dot{width:10px;height:10px;border-radius:50%;background:#ef4444;transition:border-radius .2s}
.rec[aria-pressed="true"] .dot{border-radius:2px}
.rec .t{font:400 12px/1 var(--sans);color:var(--gl-fg2);font-variant-numeric:tabular-nums}
.wave{display:flex;align-items:center;gap:3px;height:28px}
.wave i{width:3px;height:6px;border-radius:999px;background:var(--gl-fg2);transition:height .1s}
.camchip{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#4a4a52,#1a1a1d 70%);font:600 14px/1 var(--sans)}

/* Sources marquee */

/* 2. Share */

/* 3. Follow: three states */

/* 4. Feedback stops on a timeline */
.tl{position:relative;margin-top:40px;padding-top:44px}
.track2{height:6px;border-radius:999px;background:var(--wash);box-shadow:inset 0 0 0 .5px var(--rule);overflow:hidden}
.track2 i{display:block;height:100%;background:var(--quiet);opacity:.5}
.marks{position:absolute;left:0;right:0;top:0;height:50px}
.stop{position:absolute;top:0;transform:translateX(-50%);height:32px;padding-inline:10px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:500 12px/1 var(--sans);cursor:pointer;font-variant-numeric:tabular-nums}
.stop::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:20px;margin-left:-1px;background:var(--accent)}
.stop[aria-expanded="true"]{background:var(--inv);color:var(--inv-fg)}
.stop[aria-expanded="true"]::after{background:var(--inv)}
.qcard{margin-top:24px;padding:18px 20px;border-radius:14px;background:var(--sheet);box-shadow:var(--ring);animation:rise .3s var(--ease)}
.qcard .q{font:500 15px/1.5 var(--sans);margin-bottom:14px}
.bars{display:grid;gap:8px}
.bars div{display:grid;grid-template-columns:130px minmax(0,1fr) 36px;align-items:center;gap:12px;font-size:13px;color:var(--grey)}
.bars span.b{height:8px;border-radius:999px;background:var(--wash);overflow:hidden}
.bars span.b i{display:block;height:100%;background:var(--ink);border-radius:999px;width:0;transition:width .7s var(--ease)}
.bars em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}

/* Use cases */

/* Pricing */

/* The logo: the mark from server/src/brand.js (markCss), a glitterball turning. */
.mark{--s:22px;--turn:18s;display:inline-block;width:var(--s);height:var(--s);flex:none;overflow:visible;vertical-align:middle}.mark .gm{transform-box:view-box;transform-origin:32px 32px;animation:gb-sweep var(--turn) linear infinite;animation-delay:calc(var(--turn) * (var(--i) + .5) / -12)}.mark .gf{animation:gb-flip calc(var(--turn) / 6) step-end infinite}.mark .gg{transform-box:fill-box;transform-origin:center;animation:gb-glint calc(var(--turn) / 3) ease-in-out infinite}.mark .g2{animation-delay:calc(var(--turn) / -9)}.mark .g3{animation-delay:calc(var(--turn) / -4.5)}a:hover>.mark,.mark.fast{--turn:4.5s}@keyframes gb-sweep{0%{transform:scaleX(-1)}4.17%{transform:scaleX(-0.99)}8.33%{transform:scaleX(-0.97)}12.5%{transform:scaleX(-0.92)}16.67%{transform:scaleX(-0.87)}20.83%{transform:scaleX(-0.79)}25%{transform:scaleX(-0.71)}29.17%{transform:scaleX(-0.61)}33.33%{transform:scaleX(-0.5)}37.5%{transform:scaleX(-0.38)}41.67%{transform:scaleX(-0.26)}45.83%{transform:scaleX(-0.13)}50%{transform:scaleX(0)}54.17%{transform:scaleX(0.13)}58.33%{transform:scaleX(0.26)}62.5%{transform:scaleX(0.38)}66.67%{transform:scaleX(0.5)}70.83%{transform:scaleX(0.61)}75%{transform:scaleX(0.71)}79.17%{transform:scaleX(0.79)}83.33%{transform:scaleX(0.87)}87.5%{transform:scaleX(0.92)}91.67%{transform:scaleX(0.97)}95.83%{transform:scaleX(0.99)}100%{transform:scaleX(1)}}@keyframes gb-flip{0%{opacity:0}25%{opacity:1}75%{opacity:0}}@keyframes gb-glint{0%,40%,100%{transform:scale(0) rotate(0)}52%{transform:scale(1) rotate(45deg)}64%{transform:scale(0) rotate(90deg)}}@media (prefers-reduced-motion:reduce){.mark .gm,.mark .gf,.mark .gg{animation:none}}
.mark{--s:22px}
.mark.sm{--s:18px}.mark.lg{--s:64px;margin-bottom:40px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand .word{font:600 18px/1 var(--sans);letter-spacing:-.035em}

footer{border-top:1px solid var(--rule);color:var(--grey)}
footer .col{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-block:28px 96px;font-size:13px}
footer .brand .word{font-size:15px;color:var(--ink)}
footer .cols{display:flex;flex-wrap:wrap;gap:10px 24px}
footer a,.brand{display:inline-flex;align-items:center;min-height:24px}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}

/* The Glitterball mark in the corner, as the tag shows it on a prototype */
.tagmark{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 12px;border:0;border-radius:999px;background:var(--glass);color:var(--gl-fg);font:500 13px/1 var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1px var(--gl-line),0 10px 30px -10px rgba(0,0,0,.5)}
.tbtn .n{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--gl-hover);font-size:12px;font-variant-numeric:tabular-nums}
.tbtn.beacon{animation:nudge 2.4s var(--ease) 1.5s 3}
@keyframes nudge{0%,100%{transform:none}10%{transform:translateY(-3px)}20%{transform:none}}
.tlist{width:280px;padding:6px;border-radius:14px;background:var(--glass);color:var(--gl-fg);box-shadow:inset 0 0 0 1px var(--gl-line),0 16px 40px -12px rgba(0,0,0,.5);animation:rise .25s var(--ease)}
.tlist .th{padding:8px 10px 6px;font:500 12px/18px var(--sans);color:var(--gl-fg2)}
.titem{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer}
.titem:hover{background:var(--gl-hover)}
.titem b{display:block;font:500 14px/20px var(--sans)}
.titem small{font-size:12px;color:var(--gl-fg2)}
.av{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--accent);color:#fff;font:600 13px/1 var(--sans)}
body.touring .tagmark{display:none}

/* The walkthrough of this page: the same overlay, fixed to the viewport */
.tour{position:fixed;inset:0;z-index:60;pointer-events:none;font-size:13px}
.tour .cur{position:fixed}
.tour .ripple{position:fixed}
.tour .dock{position:fixed;left:20px;right:20px;bottom:20px}
.tour .cam{width:96px;height:96px}.tour .face{font-size:24px}.tour .eq{bottom:18px}
.tour .stack{padding-right:108px}
.tour .off{position:fixed}

@media (max-width:860px){
  .homegrid{grid-template-columns:minmax(0,1fr) 120px}.shirt.big{width:120px;height:120px}
  .states,.uses{grid-template-columns:minmax(0,1fr)}
  .mini{height:180px}
}
@media (max-width:720px){
  .top{padding-block:28px 0}
  .hero{padding-block:56px 28px}
  h1,.hero .sub{font-size:24px;line-height:34px;letter-spacing:-.025em}
  .hero .sub{margin-top:-20px}
  .say .a,.say .b{font-size:18px;line-height:28px}
  section{padding-block:80px 0}
  .chrome .hide,.addr .hide,.live{display:none}
  .demo{height:560px}
  .scr{padding:28px 20px 170px}
  .homegrid{grid-template-columns:minmax(0,1fr)}.homegrid .shirt{display:none}
  .opts{gap:8px}.opt{width:calc(33.3% - 6px);min-width:92px;padding:12px}
  .pnav{padding-inline:20px}
  .dock{left:10px;right:10px;bottom:10px;gap:8px}
  .cam{width:56px;height:56px}.face{font-size:18px}.eq{bottom:6px}
  .stack{padding-right:0;align-items:stretch}
  .cap{font-size:14px}
  .bar{justify-content:space-between}
  .who{flex:1}
  .ask{left:10px;right:10px;top:10px;width:auto}
    .bars div{grid-template-columns:96px minmax(0,1fr) 36px}
  /* Phone targets */
  .btn,.cmd,.brand,.signin,footer a,.bag,.pbtn,.ans button,.ic,.ic.play,.rec,.tbtn,.titem,.stop{min-height:44px;min-width:44px}
  .ic.play{width:44px;height:44px}
  footer .cols a{display:inline-flex;align-items:center;padding-inline:10px}
  .capbar{flex-wrap:wrap}
  .tour .dock{left:10px;right:10px;bottom:10px}.tour .cam{width:56px;height:56px}.tour .stack{padding-right:0}.tour .eq{bottom:7px}
}
/* How it works: three steps side by side */

/* Features: one row each, copy beside a visual, sides alternating */
.panel{padding:28px;border-radius:14px;background:var(--wash);box-shadow:inset 0 0 0 .5px var(--rule)}
.panel .tl{margin-top:0}
.fb{display:grid;gap:12px;font-size:14px;line-height:1.5}
.fb .fq{font-weight:500;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.fr{display:grid;grid-template-columns:90px 90px minmax(0,1fr);gap:12px;align-items:baseline;color:var(--grey)}
.fr b{font-weight:500;color:var(--ink)}
.fr q{quotes:none}
.msg .dim{color:var(--grey)}
.chat{display:grid;gap:10px}
.msg{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--sheet);box-shadow:var(--ring)}
.msg .mark{--s:28px;margin-top:2px}
.msg .mb{min-width:0;display:grid;gap:4px;font-size:14px;line-height:1.5}
.msg p{margin:0}
.msg .who span{color:var(--grey);font-size:12px;margin-left:6px}
@media (max-width:960px){.feat{gap:40px}.mini.lg{height:300px}}
@media (max-width:860px){.how{grid-template-columns:minmax(0,1fr)}.feat{grid-template-columns:minmax(0,1fr);gap:28px}.feat.flip .vis{order:0}}
@media (max-width:720px){.fr{grid-template-columns:minmax(0,1fr)}.mini.lg{height:240px;padding:22px}.mini.lg .mcur{left:90px;top:96px}.panel{padding:20px}.feat .say .a,.feat .say .b{font-size:20px;line-height:30px}}
/* The steps: copy on the left, the real thing on the right */
.story{display:grid;gap:0}
/* Between the sections: a dotted line whose dots drift down into an arrowhead, so the page reads as one flow. */
.flow{display:flex;justify-content:center;height:72px}
.flow svg{height:100%;width:16px;overflow:visible}
.flow path{fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow .dots{stroke-dasharray:0 7;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-7}}
@media (prefers-reduced-motion:reduce){.flow .dots{animation:none}}
.hero+.col .flow{margin-top:24px}
#how,#pricing{padding-top:0}
.mo{display:grid;gap:36px;padding:32px;margin-inline:-32px;border-radius:32px;background:var(--sheet);box-shadow:var(--card)}
.mo .copy,.mo .vis{min-width:0}
.mo .vis{display:flex;justify-content:center}
.mo .vis>*{width:100%}
.mo .panel{padding:0;background:none;box-shadow:none}
.sl{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;font-size:15px;line-height:1.5;color:var(--grey)}
.shot{position:relative;height:380px;border-radius:14px;background:var(--sheet);box-shadow:var(--lift);overflow:hidden;display:flex;flex-direction:column}
.snav{display:flex;align-items:center;justify-content:space-between;height:52px;padding-inline:26px;border-bottom:1px solid var(--rule);font-weight:500;font-size:14px}
.snav span{font-weight:400;color:var(--grey)}
.sbody{padding:32px 26px;display:grid;gap:18px;max-width:420px}
.sttl{font:500 24px/30px var(--sans);letter-spacing:-.02em}
.sopts{display:flex;gap:8px}
.sopt{height:38px;padding-inline:14px;border-radius:10px;background:var(--wash);box-shadow:inset 0 0 0 .5px var(--rule);display:inline-flex;align-items:center;font-size:14px;color:var(--grey)}
.sopt.on{background:var(--ink);color:var(--paper);box-shadow:none}
.scur{position:absolute;left:236px;top:166px;width:16px;height:16px;background:var(--accent);clip-path:polygon(0 0,100% 62%,52% 64%,32% 100%);animation:scur 4s var(--ease) infinite}
.scur::after{content:"Mark";position:absolute;left:14px;top:12px;padding:2px 7px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:500;line-height:15px}
@keyframes scur{0%,100%{transform:translate(0,0)}40%,65%{transform:translate(-110px,-6px)}}
.scam{position:absolute;left:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#4a4a52,#1a1a1d 70%);box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--accent);display:grid;place-items:center;color:#fafafa;font-weight:500}
.scap{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);max-width:62%;padding:8px 14px;border-radius:10px;background:var(--glass);color:var(--gl-fg);font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 14px 8px 16px;border-radius:999px;background:var(--glass);color:var(--gl-fg);font-size:13px;white-space:nowrap}
.sbar small{color:var(--gl-fg2)}
.sbar .prog{width:120px;height:4px;border-radius:999px;background:var(--gl-line);overflow:hidden}
.sbar .prog i{display:block;width:43%;height:100%;background:var(--gl-fg)}
/* Brand logos: one colour, the current text colour */
.logo{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}

/* Deploy: two belts of providers, drifting in opposite directions */
.belts{display:grid;gap:14px;padding-block:8px;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.belts{overflow:hidden}
.belt{display:flex;gap:10px;width:max-content;animation:belt 48s linear infinite}
.belt .run{display:flex;gap:10px;flex:none}
.belt.rev{animation-direction:reverse}
.belts:hover .belt{animation-play-state:paused}
@keyframes belt{to{transform:translateX(-50%)}}
.host{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:14px 18px;border-radius:999px;background:var(--wash);box-shadow:inset 0 0 0 .5px var(--rule);font-size:15px;color:var(--ink);white-space:nowrap}
.host .logo{color:var(--lc,var(--ink))}

/* Record: the bar and the camera, nothing else */
/* Record: the prototype as a small browser window in neutral greys, Mark's cursor walking it, the webcam in
   its corner and the capture bar sitting on its bottom edge. */
.stage{display:grid;justify-items:center;padding:0}
.proto{position:relative;width:100%;max-width:560px;border-radius:12px;background:var(--sheet);box-shadow:var(--ring),0 24px 48px -24px rgba(0,0,0,.25);overflow:hidden}
.pbar{display:flex;align-items:center;gap:6px;height:36px;padding-inline:14px;border-bottom:1px solid var(--rule);background:var(--wash)}
.pbar i{width:10px;height:10px;border-radius:50%;background:var(--rule)}
.purl{margin:0 auto;padding:3px 12px;border-radius:999px;background:var(--sheet);box-shadow:inset 0 0 0 .5px var(--rule);font-size:11px;color:var(--grey)}
.pbody{display:grid;gap:18px;padding:18px 22px 26px}
.pnav{display:flex;align-items:center;gap:14px}
.pnav b{width:22px;height:22px;border-radius:6px;background:var(--ink);opacity:.85}
.pnav i{width:40px;height:8px;border-radius:999px;background:var(--rule)}
.pnav i:first-of-type{margin-left:auto}
.phead{display:grid;gap:8px}
.pt{display:block;height:9px;width:46%;border-radius:999px;background:var(--rule)}
.pt.l{height:16px;width:38%;background:var(--ink);opacity:.8}
.pt.s{width:28%}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ptile{display:grid;gap:8px;padding:8px;border-radius:8px;transition:box-shadow .3s}
.pimg{display:block;aspect-ratio:1;border-radius:6px;background:linear-gradient(160deg,var(--wash),var(--rule))}
.ptile .pt{width:70%}.ptile .pt.s{width:40%}
.ptile:nth-child(1){animation:hit 9s var(--ease) infinite}
.ptile:nth-child(3){animation:hit 9s var(--ease) infinite 4.5s}
@keyframes hit{0%,10%,40%,100%{box-shadow:none}16%,32%{box-shadow:0 0 0 1.5px var(--accent),0 8px 24px -8px rgba(52,97,245,.4)}}
.pcur{opacity:1;left:19%;top:60%;animation:pcur 9s var(--ease) infinite}
@keyframes pcur{0%,55%{left:19%;top:60%}62%,95%{left:61%;top:64%}100%{left:19%;top:60%}}
.proto .webcam{position:absolute;right:14px;bottom:14px;width:72px;height:72px}
.proto .wface{font-size:22px}
.stage .capbar{margin-top:-26px;position:relative;z-index:2;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ptile,.pcur{animation:none}}
.webcam{position:relative;width:88px;height:88px;flex:none}
.wring{position:absolute;inset:0;transform:rotate(-90deg)}
.wring circle{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:295;stroke-dashoffset:120}
.wface{position:absolute;inset:7px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#4a4a52,#1a1a1d 70%);color:#fafafa;font:600 26px/1 var(--sans);box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.weq{position:absolute;left:50%;bottom:10px;display:flex;align-items:flex-end;gap:2px;height:10px;transform:translateX(-50%)}
.weq i{width:3px;border-radius:999px;background:rgba(255,255,255,.65);animation:weq 1.1s ease-in-out infinite}
.weq i:nth-child(1){height:4px}.weq i:nth-child(2){height:8px;animation-delay:.15s}.weq i:nth-child(3){height:10px;animation-delay:.3s}.weq i:nth-child(4){height:7px;animation-delay:.45s}.weq i:nth-child(5){height:4px;animation-delay:.6s}
@keyframes weq{50%{transform:scaleY(.4)}}

/* Share: the address, and Slack underneath */
/* Share: the top-left corner of a Slack window, cropped by the card's edge. Slack's own aubergine
   sidebar in light mode, its dark theme in dark mode. */
#share{overflow:hidden}
.slackwin{margin:0 -32px -32px 0;padding-left:0}
.swin{--sl-top:#350d36;--sl-side:#3f0e40;--sl-on:#1164a3;--sl-chat:var(--sheet);display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:40px auto;min-height:360px;width:calc(100% + 32px);border-radius:12px 0 0 0;background:var(--sl-chat);box-shadow:0 0 0 1px var(--rule),0 12px 40px rgba(0,0,0,.08);overflow:hidden}
.sktop{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-inline:14px;background:var(--sl-top);color:#fff}
.sktop .logo{width:18px;height:18px}
.ssearch{margin-left:120px;width:min(380px,50%);padding:5px 12px;border-radius:6px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:13px;color:rgba(255,255,255,.8)}
.sside{display:grid;align-content:start;gap:2px;padding:14px 0 24px;background:var(--sl-side);color:rgba(255,255,255,.72);font-size:14px}
.sws{display:flex;align-items:center;gap:6px;margin:0 16px 14px;font-weight:600;font-size:15px;color:#fff}
.sws svg{width:14px;height:14px}
.ssh{margin:10px 16px 4px;font-size:13px;color:rgba(255,255,255,.55)}
.sside ul{list-style:none;margin:0;padding:0}
.sside li{display:flex;align-items:center;gap:8px;padding:4px 16px;line-height:20px;white-space:nowrap}
.sside li i{font-style:normal;opacity:.6}
.sside li.on{background:var(--sl-on);color:#fff}
.sside li.on i{opacity:1}
.pres{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2bac76;margin-inline:3px 2px}
.smain{display:grid;align-content:start;gap:16px;padding:0 24px 24px}
.shead{display:flex;align-items:center;gap:6px;margin:0 -24px;padding:12px 24px;border-bottom:1px solid var(--rule);font-weight:600;color:var(--ink)}
.shead i{font-style:normal;color:var(--grey)}
.shead span{margin-left:auto;font-weight:400;font-size:13px;color:var(--grey)}
.cm{display:flex;gap:12px;align-items:flex-start}
.cav{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:8px;background:#26262b;color:#fff;font:600 14px/1 var(--sans)}
.cb{min-width:0;max-width:520px;display:grid;gap:2px;font-size:15px;line-height:1.5}
.cb p{margin:0}
.cwho{font-weight:600;color:var(--ink)}
.cwho time{margin-left:4px;font-weight:400;font-size:12px;color:var(--grey)}
.cb a{color:var(--sl-on);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;word-break:break-all}
.cb a:hover{text-decoration-color:currentColor}
.unf{display:grid;gap:2px;margin-top:6px;padding:8px 12px;border-left:4px solid var(--rule);font-size:14px}
.unf b{font-weight:600;color:var(--ink)}
.unf span{color:var(--grey)}
@media (max-width:600px){.swin{grid-template-columns:132px minmax(0,1fr)}.ssearch{display:none}.smain{padding-inline:16px}.shead{margin-inline:-16px;padding-inline:16px;white-space:nowrap}.shead span{display:none}.cb{font-size:14px}}

/* Your agent: Glitterball, a pipe marked MCP, and the agents it reaches */
.net{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:0;padding:8px 0}
.hub{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink)}
.hub .mark{--s:28px}
/* The lines are dotted and the dots drift from Glitterball towards the agents, a packet runs the pipe every few
   seconds, the MCP pill pulses as it passes, and the agents light up in turn as it arrives. */
.pipe{position:relative;display:flex;align-items:center;justify-content:center;width:170px;height:100%}
.pipe::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1px;background:radial-gradient(circle,var(--grey) 1px,transparent 1.4px) 0 50%/7px 3px repeat-x;animation:drift-x .6s linear infinite}
.pipe::after{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3px;border-radius:50%;background:var(--ink);animation:packet 3s cubic-bezier(.5,0,.5,1) infinite}
.pipe span{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--sheet);box-shadow:var(--ring);font-size:13px;color:var(--grey);animation:pill 3s ease-out infinite}
.pipe .logo{width:16px;height:16px}
.agents{position:relative;list-style:none;margin:0;padding:0 0 0 24px;display:grid;gap:10px}
.agents::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:3px;background:radial-gradient(circle,var(--grey) 1px,transparent 1.4px) 50% 0/3px 7px repeat-y;animation:drift-y .6s linear infinite}
.agents li{position:relative;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
.agents li::before{content:"";position:absolute;left:-24px;width:16px;height:3px;background:radial-gradient(circle,var(--grey) 1px,transparent 1.4px) 0 50%/7px 3px repeat-x;animation:drift-x .6s linear infinite}
.agents .logo{color:var(--lc,var(--ink));animation:rx 3s ease-out infinite}
.agents li:nth-child(1) .logo{animation-delay:1.5s}.agents li:nth-child(2) .logo{animation-delay:1.65s}.agents li:nth-child(3) .logo{animation-delay:1.8s}.agents li:nth-child(4) .logo{animation-delay:1.95s}.agents li:nth-child(5) .logo{animation-delay:2.1s}
@keyframes drift-x{to{background-position-x:7px}}
@keyframes drift-y{to{background-position-y:7px}}
@keyframes packet{0%{left:0;opacity:0}8%{opacity:1}42%,58%{left:50%;opacity:0}60%{left:50%;opacity:1}92%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes pill{0%,38%{box-shadow:var(--ring)}44%{box-shadow:var(--ring),0 0 0 6px rgba(127,127,127,.18)}60%,100%{box-shadow:var(--ring)}}
@keyframes rx{0%,100%{transform:none}6%{transform:scale(1.3)}16%{transform:none}}
@media (prefers-reduced-motion:reduce){.pipe::before,.pipe::after,.pipe span,.agents::before,.agents li::before,.agents .logo{animation:none}.pipe::after{display:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.host,.agents) .logo{color:var(--lcd,var(--lc,var(--ink)))}}:root[data-theme="dark"] :is(.host,.agents) .logo{color:var(--lcd,var(--lc,var(--ink)))}

/* Pricing: one card, a row per plan */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:40px -32px 0}
.plan{display:grid;align-content:start;gap:16px;padding:32px;border-radius:32px;background:var(--sheet);box-shadow:var(--card)}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.plan h3{margin:0;font:500 17px/24px var(--sans);letter-spacing:-.01em}
.plan p{margin:0;color:var(--grey);font-size:14px;line-height:1.5}
.plan .big{display:flex;align-items:baseline;gap:10px;font:500 17px/24px var(--sans);letter-spacing:-.01em;color:var(--grey)}
.plan .big b{font:500 44px/44px var(--sans);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.plan .sl{margin:0}
.plan p+.sl{margin-top:-8px}
.amt{display:block;margin:0;font:500 17px/24px var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.amt small{font-size:13px;color:var(--grey);font-weight:400;margin-left:5px;letter-spacing:0}
@media (max-width:860px){.mo,.plans{margin-inline:0}.mo,.plan{border-radius:24px;padding:24px}.plans{gap:16px}}
@media (max-width:720px){.net{grid-template-columns:minmax(0,1fr);gap:16px;justify-content:stretch}.pipe{width:auto;height:40px}.agents{padding-left:0}.agents::before,.agents li::before{display:none}.plans{grid-template-columns:minmax(0,1fr)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .swin{--sl-top:#121016;--sl-side:#19171d}:root:not([data-theme="light"]) .cb a{color:#1d9bd1}}
:root[data-theme="dark"] .swin{--sl-top:#121016;--sl-side:#19171d}:root[data-theme="dark"] .cb a{color:#1d9bd1}