:root{
  --ink:#0a0a0a; --mute:#6b6b6b; --line:#e6e6e6; --bg:#fff; --soft:#f5f5f5;
  --ghost:#eceef0;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
code{font-family:var(--mono);font-size:.9em;background:var(--soft);padding:1px 5px;border-radius:4px}

.top{max-width:1100px;margin:0 auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}
.brand img{border-radius:7px}
.top nav{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--mute)}
.top nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border-radius:999px;font-weight:600;letter-spacing:-.005em;transition:transform .15s,background .15s;white-space:nowrap}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-lg{padding:14px 24px;font-size:16px}

.hero{max-width:760px;margin:56px auto 36px;padding:0 28px;text-align:center}
h1{font-size:clamp(40px,7vw,72px);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin:0 0 22px}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.lede{font-size:19px;line-height:1.5;color:var(--mute);margin:0 auto 32px;max-width:600px}
.cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.fine{font-size:13px;color:var(--mute)}

/* ---------- demo window ---------- */
.demo{max-width:1100px;margin:0 auto;padding:0 28px}
.window-scale{width:100%;max-width:960px;margin:0 auto;aspect-ratio:960/600;position:relative}
.window{position:absolute;left:0;top:0;width:960px;height:600px;transform-origin:0 0;background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 30px 80px -20px rgba(0,0,0,.25),0 10px 30px -10px rgba(0,0,0,.12);overflow:hidden;user-select:none}
.titlebar{position:absolute;inset:0 0 auto 0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:5;pointer-events:none}
.lights{display:flex;gap:7px}
.lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
.switcher{pointer-events:auto;display:flex;gap:2px;padding:3px;background:rgba(246,246,246,.9);backdrop-filter:blur(10px);border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.08)}
.switcher button{all:unset;cursor:pointer;width:32px;height:24px;display:grid;place-items:center;border-radius:7px;color:#8a8a8a;font-weight:800;transition:background .12s,color .12s,transform .08s}
.switcher button:hover{color:#555}
.switcher button.on{background:rgba(0,0,0,.1);color:#111}
.switcher button.press{transform:scale(.9)}
.switcher .md{font-size:11px;font-weight:900;letter-spacing:-.02em}
.switcher .xx{font-size:14px}
.switcher .in{font-size:14px;font-weight:900;letter-spacing:-.02em}

.stage{position:absolute;inset:0;background:#fff}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s .32s,transform .32s ease;transform:translateY(6px) scale(.995)}
.view.on{opacity:1;visibility:visible;transition:opacity .32s ease,transform .32s ease;transform:none}

.copy-pill{position:absolute;right:16px;bottom:14px;z-index:5;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#333;background:rgba(246,246,246,.95);padding:6px 11px;border-radius:999px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.08)}
.count-pill{position:absolute;right:92px;bottom:14px;z-index:5;font-size:12px;color:#555;background:rgba(246,246,246,.95);padding:6px 11px;border-radius:999px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.08);opacity:0;transition:opacity .25s}
.count-pill.on{opacity:1}
.count-pill::after{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;margin-left:8px;vertical-align:-1px;background:conic-gradient(#1d9bf0 var(--p,8%),#e5e7eb 0)}

.cursor{position:absolute;left:0;top:0;z-index:20;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transform:translate(520px,330px);transition:transform .8s cubic-bezier(.3,.9,.3,1);opacity:0}
.cursor.show{opacity:1}
.cursor.click svg{transform:scale(.85);transform-origin:2px 2px;transition:transform .08s}

/* avatars & ghosts */
.av{flex:none;width:40px;height:40px;border-radius:50%;background:#000;color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center;letter-spacing:.01em}
.av.sq{border-radius:8px;width:36px;height:36px}
.ghost{display:flex;gap:12px;padding:14px 16px;opacity:.9}
.g-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ghost)}
.g-av.sq{border-radius:8px;width:36px;height:36px}
.g-lines{flex:1;line-height:0;padding-top:2px}
.g-lines i{display:inline-block;height:10px;border-radius:5px;background:var(--ghost);margin:0 0 9px 0}
.g-lines br{display:block;content:""}
.dim{color:#71767b}.sm{font-size:12px}

.post-text{font-size:15px;line-height:1.45;color:#0f1419}
.post-text p{margin:0 0 14px}
.post-text p:last-child{margin:0}

/* plaintext */
.view-plaintext .raw{margin:0;position:absolute;left:0;right:0;top:92px;padding:0 0 0 110px;font-family:var(--mono);font-size:14px;line-height:1.75;color:#111;white-space:pre-wrap;max-width:720px}
.caret{display:inline-block;width:1.5px;height:1.1em;background:#111;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* markdown */
.doc{position:absolute;left:110px;top:88px;width:620px;font-size:15px;line-height:1.5}
.doc h2{font-size:28px;letter-spacing:-.02em;margin:0 0 26px;font-weight:700}
.doc p{margin:0 0 30px}
.doc ul{list-style:none;padding:0;margin:0 0 30px}
.doc li{margin:0 0 8px}
.doc li::before{content:"•";margin-right:8px}

/* X */
.x-col{position:absolute;left:180px;width:600px;top:0;bottom:0;border-left:1px solid #eff3f4;border-right:1px solid #eff3f4;overflow:hidden;font-size:15px;color:#0f1419}
.x-tabs{display:flex;height:53px;border-bottom:1px solid #eff3f4}
.x-tabs span{flex:1;display:grid;place-items:center;color:#536471;font-weight:500;position:relative;height:100%}
.x-tabs span.on{color:#0f1419;font-weight:700}
.x-tabs span.on::after{content:"";position:absolute;bottom:0;width:56px;height:4px;border-radius:2px;background:#1d9bf0}
.x-post-btn{background:#8ecdf8;color:#fff;font-weight:700;padding:8px 16px;border-radius:999px;font-size:15px;align-self:flex-end}
.x-post{display:flex;gap:12px;padding:12px 16px;border-top:1px solid #eff3f4;border-bottom:1px solid #eff3f4}
.x-body{flex:1;min-width:0}
.x-head{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.x-head .dim{font-size:15px}
.x-actions{display:flex;justify-content:space-between;color:#536471;font-size:13px;margin-top:12px;padding-right:8px}
.x-actions span{display:flex;align-items:center;gap:6px}
.x-actions svg{width:18px;height:18px}
.x-actions .r{gap:14px}

/* LinkedIn */
.view-li{background:#f4f2ee}
.li-col{position:absolute;left:210px;width:555px;top:14px;font-size:14px;color:#000}
.li-card{background:#fff;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.li-start{padding:12px 16px 8px;margin-bottom:8px}
.li-row{display:flex;align-items:center;gap:8px}
.li-input{flex:1;border:1px solid #8c8c8c;border-radius:999px;padding:11px 16px;font-weight:600;color:#666}
.li-media{display:flex;justify-content:space-around;padding:12px 0 2px;font-weight:600;color:#666}
.li-sort{display:flex;justify-content:flex-end;font-size:12px;color:#666;padding:4px 6px 8px;position:relative}
.li-sort::before{content:"";position:absolute;left:0;right:70px;top:50%;border-top:1px solid #dcdcdc}
.li-head{display:flex;gap:8px;padding:12px 16px 0;align-items:flex-start}
.li-head>div{flex:1;line-height:1.3}
.li-dots{color:#666;letter-spacing:1px}
.li-card .post-text{padding:10px 16px 8px;font-size:14px;color:#000}
.li-social{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;font-size:12px;border-bottom:1px solid #e8e8e8;margin:0 12px}
.li-reacts{display:flex;align-items:center;gap:0;color:#666}
.li-reacts i{width:16px;height:16px;border-radius:50%;background:#378fe9;margin-right:-5px;box-shadow:0 0 0 1.5px #fff}
.li-reacts i:nth-child(2){background:#df704d}.li-reacts i:nth-child(3){background:#f5bb5c;margin-right:8px}
.li-actions{display:flex;justify-content:space-around;padding:8px 10px;font-weight:600;color:#555}
.li-card.ghost{margin-top:8px;padding:16px}

/* Slack */
.view-slack{display:flex;font-size:15px;color:#1d1c1d}
.sl-side{width:220px;flex:none;background:#3f0e40;color:#cfc3cf;padding:52px 0 0;font-size:14px}
.sl-ws{color:#fff;font-weight:800;font-size:17px;padding:0 16px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.sl-nav{display:flex;flex-direction:column;gap:9px;padding:14px 16px 20px}
.sl-h{padding:0 16px 10px;color:#cfc3cf}
.sl-ch{display:flex;flex-direction:column;gap:3px;padding:0 8px}
.sl-ch span{padding:4px 8px;border-radius:5px}
.sl-ch span.on{background:#1164a3;color:#fff}
.sl-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.sl-top{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #e3e3e3;font-size:17px;margin-top:0}
.sl-msgs{flex:1;overflow:hidden;padding:12px 18px 0}
.sl-day{display:flex;align-items:center;margin:12px 0}
.sl-day::before,.sl-day::after{content:"";flex:1;border-top:1px solid #e3e3e3}
.sl-day span{border:1px solid #e3e3e3;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
.sl-msg{display:flex;gap:10px;padding:6px 0}
.sl-msg .post-text{font-size:15px;line-height:1.46;color:#1d1c1d;margin-top:2px}
.sl-msg .post-text p{margin-bottom:12px}
.sl-reacts{display:flex;gap:6px;margin-top:8px;font-size:12px}
.sl-reacts span{border:1px solid #c7e2f6;background:#e8f5fa;border-radius:999px;padding:2px 8px}
.sl-reacts span:last-child{background:#f2f2f2;border-color:#e3e3e3}
.sl-compose{margin:0 18px 18px;border:1px solid #c9c9c9;border-radius:10px;padding:8px 12px 12px;background:#fff}
.sl-tools{display:flex;gap:14px;font-size:12px;color:#444;margin-bottom:8px}
.sl-tools i{font-style:italic}

.caption{text-align:center;color:var(--mute);font-size:14px;margin:26px 0 0}

/* points */
.points{max-width:1000px;margin:84px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.points h3{font-size:16px;margin:0 0 8px;letter-spacing:-.01em}
.points p{margin:0;color:var(--mute);font-size:15px}

/* install */
.install{max-width:1000px;margin:96px auto 0;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dmg{border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 60px -24px rgba(0,0,0,.25);overflow:hidden}
.dmg-bar{height:40px;display:flex;align-items:center;gap:0;padding:0 14px;font-size:13px;font-weight:600;color:#444;background:#f6f6f6;border-bottom:1px solid var(--line)}
.dmg-bar span:last-child{flex:1;text-align:center;margin-right:48px}
.dmg-body{height:250px;display:flex;align-items:center;justify-content:center;gap:34px;color:#999}
.dmg-body img{border-radius:22px;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.folder{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:#333}
.folder i{display:block;width:96px;height:72px;background:#e9e9e9;border-radius:6px 10px 10px 10px;position:relative;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06)}
.folder i::before{content:"";position:absolute;left:0;top:-8px;width:40px;height:14px;background:#dcdcdc;border-radius:5px 8px 0 0}
.install-copy h2{font-size:34px;letter-spacing:-.03em;margin:0 0 16px;line-height:1.1}
.install-copy ol{margin:0 0 28px;padding-left:20px;color:var(--mute);font-size:16px}
.install-copy li{margin-bottom:8px}

footer{max-width:1100px;margin:110px auto 0;padding:28px;border-top:1px solid var(--line);display:flex;justify-content:center;gap:12px;font-size:14px;color:var(--mute)}
footer a:hover{color:var(--ink)}

@media (max-width:820px){
  .points{grid-template-columns:1fr;gap:28px;margin-top:60px}
  .install{grid-template-columns:1fr;gap:28px;margin-top:64px}
  .top nav a:not(.btn){display:none}
  .hero{margin-top:36px}
  .lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .cursor{display:none}
  .view,.btn{transition:none}
}