.cb-cursor { position:fixed; top:0; left:0; z-index:150; contain:layout style size; pointer-events:none; will-change:transform; transition:opacity .3s, color .4s; }
.cb-cursor:before { content:""; position:absolute; top:-24px; left:-24px; display:block; width:48px; height:48px; transform:scale(0); border-radius:50%; transition:opacity .1s, transform .3s ease-in-out; }
.cb-cursor-text { position:absolute; top:-18px; left:-18px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; transform:scale(0) rotate(10deg); opacity:0; color:#fff; font-size:16px; line-height:20px; text-align:center; letter-spacing:-0.01em; transition:opacity .4s, transform .3s; }
@supports (mix-blend-mode:exclusion) { .cb-cursor.-exclusion, .cb-cursor.-opaque { mix-blend-mode:exclusion; } }
@supports (mix-blend-mode:exclusion) { .cb-cursor.-exclusion:before, .cb-cursor.-opaque:before { background:#fff; } }
.cb-cursor.-normal, .cb-cursor.-text { mix-blend-mode:normal; }
.cb-cursor.-normal:before, .cb-cursor.-text:before { background:currentColor; }
.cb-cursor.-inverse { color:#fff; }
.cb-cursor.-visible:before { transform:scale(.2); }
.cb-cursor.-visible.-active:before { transform:scale(.23); transition-duration:.2s; }
.cb-cursor.-pointer:before { transform:scale(0); }
.cb-cursor.-text:before { background:#000; opacity:.8; backdrop-filter:blur(10); transform:scale(1.7); }
.cb-cursor.-text .cb-cursor-text { opacity:1; transform:scale(1); }
.cb-cursor.-text.-active:before { transform:scale(1.6); transition-duration:.2s; }
.cb-cursor.-opaque:before { transform:scale(1.32); }
.cb-cursor.-opaque.-active:before { transform:scale(1.2); }
.cb-cursor.-lg:before { transform:scale(2); }
.cb-cursor.-hidden:before { transform:scale(0); }
.-color-red { color:red; }
.-color-green { color:#51c67d; }
.cb-demo { background:#fff; }
.cb-demo-content { display:flex; align-items:center; justify-content:center; height:100vh; }
.cb-demo-container { padding:0 20px; }
@media (min-width:1600px) { .cb-demo-container { padding:0 120px; } }
.cb-demo-row { display:flex; justify-content:center; text-align:center; margin:30px 0; }
@media (min-width:1600px) { .cb-demo-row { margin:60px 0; } }
.cb-demo-item { position:relative; flex:1; padding:50px 30px; margin:0 20px; color:#000; }
@media (min-width:1600px) { .cb-demo-item { padding:90px 30px; margin:0 30px; } }
.cb-demo-item-title { position:relative; margin:0 0 25px; font-size:30px; font-weight:700; }
.cb-demo-item-text { position:relative; max-width:70%; margin:0 auto; color:rgba(0,0,0,.5); font-size:16px; font-weight:300; line-height:150%; }
.cb-demo-item:before { content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:30px; background:#f8f8f8; transition:box-shadow .2s; }