.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.knowledge{background:radial-gradient(ellipse at 60% 65%,#41493666,transparent 70%),#242921}
.paper{position:absolute;width:115px;height:142px;left:calc(50% - 57px);top:54px;border:1px solid #a9bb8d55;border-radius:3px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.paper-back{background:#323c2b;transform:rotate(-12deg) translate(-10px,0)}
.paper-front{background:#dce4cc;transform:rotate(7deg);padding:18px 17px;box-shadow:0 12px 32px #0003}
.paper-symbol{font-size:44px;line-height:1;font-weight:700;letter-spacing:-4px;color:#273520}.paper-symbol>span{color:#648445}
.paper-front>i{display:block;height:2px;background:#77836955;margin-top:10px;width:100%}.paper-front>i:last-child{width:60%}
.affine-caption{position:absolute;bottom:17px;left:20px;font:8px Consolas,'Courier New',monospace;letter-spacing:1px;color:#adbba0}
body[data-motion=running] .affine:hover .paper-front{transform:rotate(2deg) translate(3px,-6px)}
body[data-motion=running] .affine:hover .paper-back{transform:rotate(-17deg) translate(-13px,-1px)}
.card-title{gap:7px}.card-body{padding:20px}.card-title h3{font-size:18px}.card-body p br{display:none}
@media(min-width:1500px){.paper{top:68px}}
@media(max-width:1200px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-title{flex-direction:row;align-items:center}.card-body{padding:23px}}
@media(max-width:680px){.grid{grid-template-columns:1fr}.card-body{padding:22px}.paper{top:52px}}